问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

单个页面中的多个 Bootstrap 模态

社区维基
1
新手上路，请多包涵

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

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

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

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

原文由 Rahbee Alvee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmltwitter-bootstrap-3bootstrap-modal
阅读 845
2 个回答
得票最新
社区维基
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 调用以获取一些动态数据。将您的回复附加到模态正文并仅显示模态。而已！！

原文由 Punit Gajjar 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

查询

$(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
      }
   });
});

原文由 kapantzak 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题