javascript - 模态在 Bootstrap 中不起作用

Question

我正在使用 Bootstrap 构建网站，当我尝试使用模态时，它对我不起作用!我的意思是它没有弹出。我已经搜索了每一个解决方案，但无法解决。然后我发现

最好的问候

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type"button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i>Subscribe to our Mailing List</h4>
            </div><!--modal header-->
            <div class="modal-body">
                <p>Simply enter your name and email! As a thank you for joining us, we're going to give you one of our best-selling courses, <em>for free!</em></p>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="subscribe-name">Your first name</label>
                        <input type="text" class="form-control" id="subscribe-name" placeholder="Your first name">
                    </div><!--form group-->
                </form><!--form-->
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="subscribe-email">and your email</label>
                        <input type="text" class="form-control" id="subscribe-email" placeholder="and your email">
                    </div><!--form group-->
                    <input type="submit" class="btn btn-danger" value="Subscribe!">
                </form><!--form-->
                <hr>
                <p><small>By providing your email you consent to receiving occosional promotional emails & newsletter. <br>No Spam. Just good stuff. We respect your privacy & you may unsubscribe at any time.</small></p>
            </div><!--modal-body-->
        </div><!--modal-content-->
    </div><!--modal-dialog-->
 </div><!--modal-->



<!--BOOTSTRAP CORE JAVASCRIPT
   ==========================-->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="assets/js/jquery-2.2.4.min.js"></script>
   <script src="assets/js/bootstrap.min.js"></script>
   <script src="assets/js/main.js"></script>

然后我找到了这段代码并添加了我的“main.js”文件然后它工作正常但是之后当我在手机上使用我的网页并点击右上角时它打开了模式而不是打开导航栏。这是图片!

You can find what I meant here!

PS:如果我拼错了，请见谅!

$('button').click(function(){
 $('#myModal').modal('show');
});

Answer 1

您应该始终在 DOM 中寻找“特定”元素，而不是使用“常见”元素。

您当前的代码失败，因为您在“按钮”元素上绑定(bind)了点击事件，这意味着您希望在 DOM 的任何“按钮”元素上显示模式。

你应该做的是跟随，

// this will add click event on only button with specific id i.e. button_id
$('button#button_id').click(function(){
   $('#myModal').modal('show');
});

或

// this will add click event on only button with specific class i.e. button_class
$('button.button_class').click(function(){
   $('#myModal').modal('show');
});

这里要注意的另一个主要问题是，如果没有您添加的这个 js 代码段，您的模式无法打开。