I'm very much a noob, so I think I'm overseeing something (probably obvious) with twitter bootstrap modal. What I am trying to do is get a modal to launch only on mobile. This works fine with adding the class .visible-phone on the modal div. So far so good. But then I want it to work, meaning you can close it with the X button. And I cannot get the button to work.
<div class="modal visible-phone" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
In the bottom of the html I put jquery.js (first) and bootstrap.modal.js and bootstrap.transition.js. Actually all of the bootstrap js modules (not to miss an include). I'm not experienced with js..
Please forgive me if I posed a really stupid Q. I could not find the answer to this specific situation in the log.
This question is related to
twitter-bootstrap
modal-dialog
Try specifying exactly the modal that the button should close with data-target. So your button should look like the following -
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
Also, you should only need bootstrap.modal.js so you can safely remove the others.
Edit: if this doesn't work then remove the visible-phone class and test it on your PC browser instead of the phone. This will show whether you are getting javascript errors or if its a compatibility issue for example.
Edit: Demo code
<html>
<head>
<title>Test</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
$("#myModal").modal("show");
}
$("#myModalClose").click(function () {
$("#myModal").modal("hide");
});
});
</script>
</head>
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<a class="close" id="myModalClose">×</a>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
</body>
</html>
.modal('hide') manually hides a modal. Use following code to close your bootstrap model
$('#myModal').modal('hide');
Take a look at working codepen here
Or
Try here
$(function () {_x000D_
$(".custom-close").on('click', function() {_x000D_
$('#myModal').modal('hide');_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<!-- Button trigger modal -->_x000D_
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">_x000D_
Launch demo modal_x000D_
</button>_x000D_
_x000D_
<!-- Modal -->_x000D_
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">_x000D_
<div class="modal-dialog">_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>_x000D_
<h4 class="modal-title" id="myModalLabel">Modal title</h4>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
_x000D_
_x000D_
<a class="custom-close"> My Custom Close Link </a>_x000D_
_x000D_
_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
<button type="button" class="btn btn-primary">Save changes</button>_x000D_
</div>_x000D_
</div><!-- /.modal-content -->_x000D_
</div><!-- /.modal-dialog -->_x000D_
</div><!-- /.modal -->Here is a snippet for not only closing modals without page refresh but when pressing enter it submits modal and closes without refresh
I have it set up on my site where I can have multiple modals and some modals process data on submit and some don't. What I do is create a unique ID for each modal that does processing. For example in my webpage:
HTML (modal footer):
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
jQUERY:
$(document).ready(function(){
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(".trigger").is(".ok"))
$("#PreLoadOrders").trigger("click");
else
return;
}
});
});
As you can see this submit performs processing which is why I have this jQuery for this modal. Now let's say I have another modal within this webpage but no processing is performed and since one modal is open at a time I put another $(document).ready() in a global php/js script that all pages get and I give the modal's close button a class called: ".modal-close":
HTML:
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery (include global.inc):
$(document).ready(function(){
// Allow enter key to trigger a particular button anywhere on page
$(document).keypress(function(e) {
if(e.which == 13) {
if($(".modal").is(":visible")){
$(".modal:visible").find(".modal-close").trigger('click');
}
}
});
});
If you have few modal shown simultaneously you can specify target modal for in-modal button with attributes data-toggle and data-target:
<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Modal Title</h4>
<small>Modal Subtitle</small>
</div>
<div class="modal-body">
<p>Modal content text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
</div>
</div>
</div>
</div>
Somewhere outside the modal code you can have another toggle button:
<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>
User can't click in-modal toggle button while these button hidden and it correct works with option "modal" for attribute data-toggle. This scheme works automagicaly!
Add the class hide to the modal
<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >
Javascript Code
<!-- Use this to hide the modal necessary for loading and closing the modal-->
<script>
$(function(){
$('#closeModal').click(function(){
$('#myModal').modal('hide');
});
});
</script>
<!-- Use this to load the modal necessary for loading and closing the modal-->
<script>
$(function () {
$('#myModal').modal('show');
});
</script>
I had problems closing the bootstrap modal dialog, if it was opened with:
$('#myModal').modal('show');
I solved this problem opening the dialog by the following link:
<a href="#myModal" data-toggle="modal">Open my dialog</a>
Do not forget the initialization:
$('#myModal').modal({show: false});
I also used the following attributes for the closing button:
data-dismiss="modal" data-target="#myModal"
$('#myModal').modal('hide') should do it
I had the same problem in the iphone or desktop, didnt manage to close the dialog when pressing the close button.
i found out that The <button> tag defines a clickable button and is needed to specify the type attribute for a element as follow:
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
check the example code for bootstrap modals at : BootStrap javascript Page
Try on this..
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
According the documentaion hide / toggle should work. But it don't.
Here is how I did it
$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
Source: Stackoverflow.com