模态在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”文件，然后它工作正常，但在此之后，当我在手机上使用我的网页并点击右上方时，它打开模态而不是打开导航栏。 这是图像！

你可以在这里找到我的意思！

PS：对不起，如果我拼错了！

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

Answer 1

你应该总是寻找'特定'元素而不是在DOM中使用'common'元素。

您当前的代码失败，因为您在“按钮”元素上绑定了一个单击事件，这意味着您想要显示模式的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片段，你的模态就不会被打开。

Answer 2

不要在全球范围内声明它。 ie $('button') 。 相反，正如@Bilal建议的那样，使用带有某个类名或ID的按钮。

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

要么

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