Question

在一个页面中，大约有150个子菜单（可扩展）。每次单击子菜单都会打开一个模式，其中包含子菜单的特定信息。页面加载时最初会获取数据。我想知道什么是实现模态的更好方法。

我应该在同一页面中写入150个模态，还是编写一个模态然后动态创建内容？

对于后一种选择，我需要一个例子。

使用的技术：Bootstrap，HTML，CSS，jQuery。

Answer 1

您可能会喜欢我创建的这个示例，如果您不了解任何地方，请告诉我。

$(document).ready(function(e) {
    // Initializing our modal.
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: false,
    });

    $(document).on("click", ".modalButton", function() {

        var ClickedButton = $(this).data("name");

        // You can make an ajax call here if you want. 
        // Get the data and append it to a modal body.


        $(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> ");
        $('#myModal').modal('show');
    });

});

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <h2>Modal Example</h2>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal" >Open Modal 3</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
         <!-- Modal -->
         <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
               <!-- Modal content-->
               <div class="modal-content">
                  <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                     <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
               </div>
            </div>
         </div>
      </div>

您只需创建一个模态即可。正如您所提到的，您将拥有150个菜单，因此您可以为它们提供一个公共类名，并使用jquery获取这些按钮/菜单的单击事件。如果需要，您可以进行一些ajax调用以获取一些动态数据。将您的回复追加到模态体并只显示模态。多数民众赞成!!

Answer 2

您可以在页面中编写一个模态。然后，每次单击子菜单时，调用异步函数以获取适当的数据，将它们附加到模态并显示它：

的jQuery

$(document).on('click', '.submenu', function() {
   $.ajax({
      url: 'path/to/file',
      method: 'POST',
      data: { ... },
      success: function(data) {
        // Get the data and fill the modal
        // Show modal
        $('#myModal').modal('show');
      },
      error: function() {
        // Error handling
      } 
   });
});

Answer 3

当然你应该写一个模态并按需生成内容。如果您选择第一个选项，那么每次您需要在公共区域进行更改时，您将需要更改+150个文件！这是非常糟糕的方法。

您需要记住Web应用程序应该是一致的。这样你就可以省下很多时间和精力。

另外，你打算如何实现这一目标。一次加载150个模态窗口而不是等待数据？：P

我看到它的方式 - 创建一个将成为框架的模态，然后用数据填充它，如果你需要在特定情况下的其他模板文件中添加东西。

干杯！

Answer 4

使用jQuery动态加载数据。我假设你有按钮打开每个模态？

http://jsfiddle.net/h3WDq/

$('#myModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. I'm using use jQuery here, you could use it to load your data
var modal = $(this)
modal.append("<p>Test</p>");
})

单页中的多个Bootstrap模态

4 个答案: