Görkem Çakır Görkem Çakır - 17 days ago 5
CSS Question

The modal is not working in Bootstrap

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

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.