Multiple pop-up windows scattered around a single webpage

Is there a more efficient way to display 50 different modals on one page without causing the HTML to become overwhelmingly large? I'm working on a project that requires multiple modal windows to open, sometimes triggering additional modals.

I am looking for a technical solution to handle these modal windows effectively. Rather than loading all 50 modal HTML codes at once when the page loads, I believe there must be a smarter approach. I've seen some websites with numerous modals where the modal div disappears from the DOM after it's closed, but I'm unsure of how this is achieved. It doesn't appear as though they insert all 50 modal HTML components into the initial page load.

Has anyone encountered a similar scenario dealing with massive modals on a webpage? Is there perhaps an HTML JS injection technique in use, storing modal templates and dynamically inserting the necessary HTML using JQuery upon button click events? And then removing the modal div from the DOM upon closing?

Any insights, solutions, or suggestions would be greatly valued.

javascriptjqueryhtmlcssdom

Answer №1

To easily display a modal, you can create a function like the following example:

function displayModal(title, content){
   $('#myModal').modal('show');
   $('.modal-title').text(title);
   $('.modal-body').html(content);
}

Simply call this function with the desired title and content whenever needed. For instance:

$('#Button1').click(function(){
   displayModal('Title One', 'Content One');
});

$('#Button2').click(function(){
   displayModal('Title Two', 'Content Two');
});

Live Demo

Update: To include complex HTML in your modal, follow this approach:

var myHtml = "<form>"
+"<div class='form-group'><h1>My Form</h1><input type='text' class='form-control'/></div>"
+"<div class='form-group'><input type='text' class='form-control'/></div>"
+"<div class='form-group'><textarea class='form-control'></textarea></div>"
+"<input class='btn btn-success' value='submit'/>"
+"</form>";

Example 2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The GAS and Bootstrap web form is able to search for and display data in a table format. However, it lacks the functionality to display clickable links or hyperlinks directly from the spreadsheet

Check out this awesome web application https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec I'm looking for help to display links or hyperlinks that some cells contain. Any suggestions? ...

javascriptgoogle-apps-scriptgoogle-sheetshyperlinkbootstrap-5

Bootstrap Popover not displaying information after an AJAX request

I'm struggling to update the popovers contents with Ajax result in my ASP.Net MVC4 project. Using ASP.Net (MVC4): public ActionResult GetEmployeeDetails(string employeeId) { var contract = UnitOfWork.ContractRepository.ContractBu ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap-3

Struggling to handle JSON response in JavaScript

Upon receiving a JSON response from the Amazon API, here is how it appears: { "Result": { "Data": { "Title": "HALO 3 (XBOX 360 - REGION FREE)", "FormattedPrice": "$19.95", "Source": "Product Description", "Content": "The epi ...

javascriptjson

JQuery mouseover event not triggering after modification of HTML

I'm dealing with an HTML table that looks like this: <div id="recommendation"> <table id="category_selected"> <tr> <td>1</td> </tr> </table> </div> and my jQuery code is like this: $ ...

jqueryhtmlmouseenter

Guide to customizing action button color on MatSnackbar?

Currently, I am encountering an issue with the snackbar in my Angular 9 project. Despite adding CSS styles to both the component.scss file and the global style.scss file, the action button on the snackbar displays the same background and text color. In an ...

htmlcssangulartypesangular-material

Transforming Backbone JSON data into a template for display

Yesterday, I asked a question that was very helpful to me. I have rewritten most of the code by following tutorials, YouTube videos, and seeking help on Stack Overflow. However, I am unsure of what I am doing wrong when trying to push the JSON data to the ...

javascriptjsonbackbone.jsunderscore.js

No routes were found that match: ""

app.routes.ts import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { PushComponent } from './push/push.component'; const appRoutes: Routes = [ { path: ...

javascripthtmlangularrouterangular-routing

Display a popup in Angular 4 when a click event is triggered by a separate

I am currently facing an issue that I can't seem to solve. My objective is to display a popup div on the page when clicking on a menu entry in my navbar.component. In order to achieve this, I introduced a property called "show" in my popup component ...

javascriptangulartypescript

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...

csshtml

The inclusion of the <div> tag disrupts the functionality of the Material UI Grid

While attempting to enclose my element within a <div> that is nested inside the <Grid>, I realized that this was causing the <Grid> layout to break! Surprisingly, when I tried the same approach with Bootstrap grid system, this issue did n ...

cssreactjsmaterial-ui

Revamping Sign-out Design in AdminLTE with ASP.NET

For my dashboard, I am utilizing the fantastic AdminLTE. However, I am facing a small styling issue with the logout functionality as it needs to be a form in ASP.NET Core MVC. Does anyone have any suggestions on how to use a normal anchor tag instead of t ...

cssasp.net-coremodel-view-controllerrazorbootstrap-4

In Next.js Typescript, the size of the final argument passed to useEffect was found to vary between renders

import dynamic from "next/dynamic" import React, { ReactNode } from "react"; type ButtonProps = { type: string, children: ReactNode, onClick: () => void } const ButtonWrapper: React.ComponentType<{}> = dynamic(() => ...

javascriptreactjstypescriptnext.jselement-ui

Equal widths that adapt and respond to different screen sizes

Currently, I am in the process of transforming a 960grid 12col responsive design into HTML. There are three separate div elements, each with a width of 300px and a margin-right of 20px. Below is the code snippet that illustrates this: HTML <section cl ...

cssresponsive-designmedia-queriespercentagefluid-layout

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

phphtmlcss

Top tip: Sketching shapes on top of a colorful backdrop

I'm in the process of designing a Flutter interface and I want to incorporate a wave pattern at the bottom of my background (similar to the image provided). What is considered the best approach for achieving this effect, even if it involves using HTM ...

cssperformanceflutter

Working with JSON objects in JavaScript using CodeIgniter framework

I am encountering an issue with my Jquery function in the controller. It seems to be unable to read the Json_encoded object, even though I am using codeigniter. Any ideas why? $(this).ajaxSubmit({ type : "POST", u ...

javascriptjsoncodeigniter

Error: Bootstrap 4 Container Size Issue

I am having an issue with the width of my footer when using a Bootstrap 4 "Container". The Container does not cover the entire bottom of the screen as expected. Even changing it to Container-Fluid does not resolve the issue. For reference, here is a JSFid ...

cssbootstrap-4

Data not reflecting changes in component when field is modified?

I currently have a table on my web page that displays data fetched from an array of objects. The data is collected dynamically through websockets by listening to three different events. User can add an entry - ✅ works perfectly User can modify ...

javascriptreactjstypescriptreact-hooksnext.js

Sharing variables between Angular 2 components: An in-depth guide

Looking for a way to change a variable in a group of child components, I have this component for an editable form control that toggles between view states import { Component, Input, ElementRef, ViewChild, Renderer, forwardRef, ...

javascriptangulartypescript

Vuejs - The router is not rendering the third component in the app, even though the first two components are functioning properly

After creating my very first Vue app, I encountered an issue with the router. While the first two components function perfectly, the third one does not seem to work as expected. Below is a snippet of my code: index.js import Vue from 'vue' impo ...

javascriptvue.jsfrontendvue-router