Question

我正在尝试创建一个Bootstrap模式作为我项目的一个要求，问题是我无法使用jQuery触发这个模态

这是模态代码：

<div class="container">
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</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>
                </div>
                <div class="modal-body">
                    <p>Please choose if you want to open an existing ticket or to create a new one.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button>
                    <button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button>
                </div>
            </div>
        </div>
    </div>
</div>

这是应该触发模态的按钮：

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
         <button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button>
     </div>
 </div>

最后这是jQuery代码：

<script>
    $(document).ready(function () {
        $("#btnLogin").click(function () {
            alert("..");
            $("#myModal").modal();
            alert("..");
        });
    });
</script>

问题是触发#myModal元素

后脚本代码没有执行

有什么建议吗？

Answer 1

试试这个：

$("#myModal").modal('show');

Answer 2

使用你应该在.modal（＆＃34; hide＆＃34;）或.modal（＆＃34; show＆＃34;）

中加入一些参数

 $("#myModal").modal("show");

请使用此按钮

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
         <button type="button" id="btnLogin" class="btn btn-success">Submit</button>
     </div>
 </div>

Answer 3

在这里，我已经为你解决了问题。

提醒总是在引导后将jquery放在第一位。

示例

<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script> <script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>

我不知道为什么你需要添加那个脚本

$(document).ready(function () { $("#btnLogin").click(function () { alert(".."); $("#myModal").modal(); alert(".."); }); });

DEMO

Answer 4

您需要删除自己的javascript！没有必要......

Bootstrap已经打开对话框，读取按钮上的属性data-toggle="modal" data-target="#myModal"

所以你的javascript在打开后会立即关闭模态。

请参阅此演示：JSFIDDLE

Answer 5

试试这个：

<script>
    $(document).ready(function () {
        $("#btnLogin").click(function () {

            $("#myModal").modal('toggle');

        });
    });
</script>

Bootstrap模态未触发

5 个答案: