模态淡入淡出对话框未打开答案

【问题标题】：Modal fade dialog does not open模态淡入淡出对话框未打开
【发布时间】：2014-07-15 22:17:03
【问题描述】：

我正在尝试使用模式引导打开一个弹出窗口。这是模态代码：

    <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">
            ...
          </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>
      </div>
    </div>
   <%--<a class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</a>--%>
   <button class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</button>

现在，当我尝试通过按钮触发模式时，它不起作用，但是当我使用锚标记 <a> 时它起作用。

如何使它与按钮一起使用？

【问题讨论】：

相当多的作品here
@ICanHasKittenz 那为什么它不能在我的本地机器上工作？？
我不知道你那边出了什么问题，但你必须检查你是否使用了正确的版本、控制台错误、任何其他阻止它的 javascript 等等。
@ICanHasKittenz：它所做的只是快速眨眼！！

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

我创建了一个JSFIDDLE，请参考。这是在按钮单击时打开模式的示例代码： HTML：

    <div class="container">

        <h3>Modal Example</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">I am a link</a>
            <button data-toggle="modal" data-target="#myModal" id="my_button">I am a button</button>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">

                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

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

    </div>

<style>

JS：

$('#my_button').click(function(){
   $('#myModal1').modal('show'); 
});

【讨论】：