Dynamic Modal Popup

Question

Hi Can we create Dynamic Modal Popup . Currently i have defined on every form where required. Thanks

Jithu Thomas · Answer

Using Asp.net & Javascript: - define a master page: - My Application Modal Title &times; Close Save changes Trigger the Modal with JavaScript You can use JavaScript to dynamically load content into the modal and display it. function showModal(title, content) { document.getElementById('exampleModalLabel').innerText = title; document.getElementById('modalBodyContent').innerHTML = content; $('#myModal').modal('show'); } Now use the Modal in Your ASP.NET Pages In any of your ASP.NET pages, you can now trigger this modal dynamically. If you need to load the content of the modal dynamically (e.g., from a server-side script), you can use AJAX. function showModalWithAjax(title, url) { document.getElementById('exampleModalLabel').innerText = title; // Load content via AJAX $.ajax({ url: url, success: function(data) { document.getElementById('modalBodyContent').innerHTML = data; $('#myModal').modal('show'); } }); } Trigger Example:

Ramco Ramco · Answer

Hi Aman I have below User Control.How i can add your code here var swalInit = swal.mixin({ buttonsStyling: false, confirmButtonClass: 'btn btn-primary', cancelButtonClass: 'btn btn-light' }); function ShowPopup_Redirect(heading, body, type, url) { swalInit.fire({ title: heading, text: body, type: type, position: 'top', allowOutsideClick: false, onClose: function () { location.href = url; } }); } Thanks

Aman Gupta · Answer

Hi Ramco, Yes, you can create a dynamic modal popup that can be reused across different forms or pages, which will save you the hassle of defining it separately for each form. Here’s how you can achieve this in an ASP.NET WebForms application using JavaScript, jQuery, and a bit of C#. Steps to Create a Dynamic Modal Popup: Create a Reusable Modal Control in your Master Page or as a User Control: Define a modal structure that will be common across your application. You can use Bootstrap for simplicity. Modal title &times; Close Save changes Create a JavaScript Function to Show the Modal with Dynamic Content: function showModal(title, bodyContent, saveButtonHandler) { $('#modalTitle').text(title); $('#modalBody').html(bodyContent); // Bind click event handler to the Save button $('#modalSaveButton').off('click').on('click', function () { if (saveButtonHandler && typeof saveButtonHandler === 'function') { saveButtonHandler(); } $('#dynamicModal').modal('hide'); }); $('#dynamicModal').modal('show'); } Trigger the Modal from Server-Side Code or Client-Side Events: From Server-Side (C#): protected void ShowDynamicModal(string title, string content) { string script = $"showModal('{title}', '{content}');"; ScriptManager.RegisterStartupScript(this, GetType(), "ShowModalScript", script, true); } From Client-Side (JavaScript): showModal('Dynamic Title', ' This is dynamic content. ', function() { alert('Save button clicked!'); }); Use the Modal Across Different Pages or Forms: On any form or page, you can trigger the dynamic modal by calling the showModal function from either the client-side or the server-side. The content and behavior of the modal can be customized each time it is invoked. Benefits: Reusability: The modal is defined once and can be reused across the application. Customizability: Each instance of the modal can have different content and behavior based on the context. Consistency: All forms use the same modal style, ensuring a consistent user experience. If you need the modal to perform specific actions (like submitting a form or making an AJAX call), you can include the logic in the saveButtonHandler parameter or in other custom event handlers.

Dynamic Modal Popup

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (3)