Question

我尝试使用模态Bootstrap打开弹出窗口。这是模态代码：

    <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>时它可以工作。

如何使用按钮？

Answer 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'); 
});

模态淡入淡出对话框无法打开

1 个答案: