Question

我只想在点击某个按钮时显示模态。

目前，只要我加载页面，模态就会显示出来。

有人可以告诉我在哪里可怕的错误吗？

<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…</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>

Answer 1

将.hide类添加到模态：

<div class="modal hide fade">
    ...
</div>

Answer 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 -->

Answer 3

要使模式起作用，您应该包括：

jquery的
自举-min.js

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

Answer 4

我知道我迟到了，但这是在Google搜索中显示的“自动显示页面加载时自举模式对话框”问题的讨论主题，因此在此提交我的答案。

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

Bootstrap v2版本的文档说......

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

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

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

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

如果您真的被迫为您的项目使用Bootstrap v2.x，请尝试此操作。但是我仍然坚持使用Bootstrap的v3.x来避免这些问题。

Answer 5

按钮启动模态代码

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

你的模态代码在这里*模态，身体，页脚等的标题

</div>

Answer 6

Bootstrap模式仅适用于Javascript - 如果您没有Bootsrap Javascript - 那么将显示模态，因为它是隐藏模态div的Javascript。

请包含bootstrap javascript并检查。

在页面加载时显示Bootstrap stop Modal

6 个答案: