一页上有许多模式窗口

Question

在单个页面上显示例如 50 种不同模式的最佳方式是什么。我正在开发一个打开了很多模式窗口的页面。模态窗口也会打开另一个模态窗口。

从技术上讲，在单个页面上显示这些模式窗口的最佳方式是什么。我不认为我应该在每次页面加载时添加 50 个模态 HTML 代码，也不需要在页面加载时预先调用所有 50 个，因为页面 HTML 会变得很大。

我认为应该有更好的方法来处理这种情况。我注意到在一些显示大量模式窗口的网站上，当模式关闭时，模式 div 似乎从 DOM 中消失了，但我不知道他们是如何做到的。看起来他们似乎没有在初始页面加载时将所有 50 个模态 HTML DOM 添加到页面 DOM。

有没有人做过类似这种情况的事情，页面可能有巨大的模态。是否存在 HTML JS 注入，其中有 HTML 模态模板存储在某处，当在按钮单击场景时，特定模态 HTML 使用 JQuery 注入/交换到 DOM 中，当在模态关闭时单击模态 div 从 DOM 中删除或什么？

感谢任何帮助、回答、评论。

Answer 1

您应该创建一个function 来调用modal，如下所示：

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

并在函数调用时插入内容。您可以随时调用函数，只需传递标题或文本等内容。像这样：

$('#Link1').click(function(){
   callModal('some title 1111', 'some text 1111');
});

$('#Link2').click(function(){
   callModal('some title 2222', 'some text 2222');
});

Online Example

更新：要通过大html 这样做：

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