3

我只希望在单击某个按钮时显示模态。

目前，每当我加载页面时，模态都会显示出来。

有人可以告诉我我要去哪里严重错误吗？

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>


                <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Modal header</h3>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…&lt;/p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        <button class="btn btn-primary">Save changes</button>
                    </div>
                </div>

我正在使用 ASP.NET MVC 3

编辑：我只有以下作为Javascript：

 <script>
   $('#myModal').on('show', function() {

   });
 </script>

这些是我对 CSS 和 JS 的引用：

    <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
 <script src=@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") type="text/javascript"> </script>
    <script src=@Url.Content("../../Content/lib/bootstrap/js/bootstrap.min.js") type="text/javascript"></script>
    <link href=@Url.Content("/Content/lib/bootstrap/css/bootstrap.min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("/Content/lib/bootstrap/css/bootstrap-responsive.min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("../../Content/lib/bootstrap/css/bootstrap-combobox.css") rel="stylesheet" type="text/css" />
    </head>
4

6 回答 6

4

向模态添加.hide类：

<div class="modal hide fade">
    ...
</div>
于 2012-09-21T14:12:31.420 回答
2

如果您不希望模态显示在页面加载中，则无需使用任何 javascript 只需使用以下代码在 Bootstrap 中创建一个简单的模态 

   <!-- Button trigger modal -->
   <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch demo modal
   </button>

   <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           <h1>Hello World!</h1>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
于 2014-01-21T09:50:14.227 回答
1

要使模态正常工作，您应该包括：

  • jQuery
  • 引导-min.js

Bootstrap 使用模式中的自定义属性来查找和应用 javascript 功能。您不需要自己编写绑定。

于 2012-09-21T10:05:47.823 回答
1

我知道我迟到了，但这是在 Google 搜索中出现的讨论线程，用于“在页面加载时自动显示引导模式对话框”问题，因此在此处提交我的答案。

给定代码中的 Bootstrap 链接显示 Bootstrap v2.x 库在此处使用。尝试版本 3，您将不会遇到此问题。

Bootstrap v2 版本的文档说...

Bootstrap 为大多数插件的独特操作提供自定义事件。通常，这些以不定式和过去分词形式出现 - 其中不定式（例如 show）在事件开始时触发，其过去分词形式（例如所示）在动作完成时触发。

所有不定式事件都提供 preventDefault 功能。这提供了在动作开始之前停止执行的能力。

添加到您的页面的建议代码是...

    $('#myModal').on('show', function (e) {
       if (!data) return e.preventDefault() // stops modal from being shown
   });

如果你真的被迫为你的项目使用 Bootstrap v2.x，试试这个。但我仍然坚持使用 v3.x 的 Bootstrap 来避免这些问题。

于 2017-06-24T02:37:46.840 回答
-1

按钮启动模式代码

<div class="modal hide" id="myModal"> 隐藏模态代码

您的模态代码在这里*模态、正文、页脚等的标题

</div>
于 2012-10-14T02:00:13.057 回答
-2

Bootstrap modal 仅适用于 Javascript - 如果您没有 Bootsrap Javascript - 然后将显示 Modal，因为它是隐藏 Modal div 的 Javascript。

请包括引导 javascript 并检查。

于 2012-09-21T09:39:33.630 回答