模态在Bootstrap中不起作用

Question

I'm building a website by using Bootstrap and when i tried to use modal it didn't work me! I mean it didn't pop-up. I've searched every single solution but couldn't solve it. Then I found

Best Regards

<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>

Then I found this code and added my "main.js" file then it worked fine but after this when I use my webpage on phone and click on the right top it opened modal instead of opening navbar. Here is the image!

You can find what I meant here!

PS: Sorry if i make any misspelling!

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

Answer 1

You should always look for 'specific' element instead of using 'common' elements in your DOM.

You current code fail as you have bound a click event on 'button' element which means on any 'button' element of your DOM you want to show up a modal.

What you should do is following,

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

or

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

Also main thing to look here is why your modal is not opened without this js snippet you added.

Answer 2

Don't declare it in global. ie $('button') . Instead, As @Bilal suggest, use the button with some class name or id.

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

Or

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