Question

我正在学习制作一个基本模态，点击链接即可显示。任何人都可以向我解释为什么下面的代码不起作用？点击后，没有任何反应。

另外，我是否总是必须在头部包含bootstrap CSS？我注意到，当它不包括在内时，模态不会被隐藏。但如果我加入它，它会覆盖我的网页CSS。

这是小提琴链接： https://fiddle.jshell.net/skLjx4cy/#&togetherjs=M9bR7EHJAE

代码：

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">        
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script>
            function loadModal() {
                $('#settingsModal').modal('show');
            }
        </script> 
        </head>
    <body>
        <div style="margin-left:10px; margin-top:10px;" id="setting_websearch">
                        <a href="" onclick="loadModal()">Web search settings</a><br>
                        <div style="margin-left: 25px; margin-top: 10px; font-size:small;">Advanced
                            users only. </div>
                    </div>
        <div id="log"></div>
        <div class="modal fade" id="settingsModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>

Answer 1

好的，问题似乎是链接目标。当我从

改变

<a href="" onclick="loadModal()">

到

<a href="#" onclick="loadModal()">

它有效

虽然我很感激为什么会有这样的建议。

感谢

（bootstrap）模态不显示

1 个答案: