Question

Jquery和Bootstrap代码在同一页面中可以说是index.html

这是我的内容

 <button id="btncreate" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Create</button>

我无法从按钮

访问myModal

<!-- 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">
                    ...
                </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>

Jquery：

<script>
$(document).ready(function(){
    $("#btncreate").click(function(){
       $('#myModal').modal('show');
    });
});
</script>

Answer 1

删除您制作的脚本或至少尝试将其注释掉。 Bootstrap已经有一个处理模态的javascript库。你制作的剧本与之相矛盾。

https://www.bootply.com/0B9qovFDev

Answer 2

1）a。如果你想通过javascript显示模态，那么你必须通过以下代码触发按钮的点击事件：

<script>
$(document).ready(function(){
    $('#btncreate').trigger('click'); 
});
</script>

湾如果您手动单击按钮，则不需要javascript / jquery代码，bootstrap会自动打开模式。

2）另一种方法是使用如下函数：

<script>    
function myFunction() {
   $('#myModal').modal('show');
}
</script>

点击按钮调用此功能：

<button onclick="myFunction()">Create</button>

3）确保页面中有bootstrap和jquery文件：

<head>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
    <!-- put first the jquery path, otherwise the bootstrap.js won't work-->
    <script src="js/jquery/jquery-3.1.0.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
</head>

希望它会有所帮助!!

Answer 3

如果您想手动处理，只需应用JQuery show函数即可运行代码。

<script>
 $(document).ready(function(){
   $("#btncreate").click(function(){
     $('#myModal').show();
 });
});
</script>

Answer 4

您的代码是有效的。但是试试你的Javascript：

<script>
    $(document).ready(function(){
        $('button').click(function(){
            $('#myModal').show()
        }) 
    });
</script>

你可以在这里查看它http://jsfiddle.net/hvqoa8c3/

为什么我无法从javascript jquery中的按钮访问对话框表格模式？

4 个答案: