I have a modal DIV:
<div class="modal fade" id="window_modal">
.....
</div>
But when click out of the WINDOW, modal window close, and I want this windows close only using close button inside modal window.
Give the modal the data-attribute backdrop="static"
e.g.
<div class="modal fade" id="window_modal" data-backdrop="static">
.....
</div>
All to find here:
http://getbootstrap.com/javascript/#modals-usage
<script type="text/javascript">
$( document ).ready(function() {
$('#window_modal').on('hide', function (e) {
e.preventDefault();
});
});</script>
Related
I want to close Modal Popup on mouseout. I wrote a code to modal popup on mouse hover. But not able to write close Modal on mouseout.
Below is the code for Mouse hover Modal Popup appears. But need to close on mouse out.
<script>
$("#b1").hover(function () {
$('.bs-example-modal-lg').modal({
show: true,
backdrop: false
});
});
</script>
<div class="slide" data-thumb="../thumbs/Q50_thumb.jpg">
<a data-toggle="modal" data-target=".bs-example-modal-lg" title="">
<img src="../original/Q50_v1_large.jpg" alt="">
<p style="text-align:center;"><i class="icon-line-bag"></i> Hover to details</p>
</a>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<p>Press the SOS button for 3 seconds, user can call and send alarm messages to the phone number.</p>
</div>
</div>
</div>
You have to pass a second param to hover which is a function too and hide the overlay of the popup.:
$("#b1").hover(function () {
$('.bs-example-modal-lg').modal({
show: true,
backdrop: false
});
}, function () {
$('.bs-example-modal-lg').modal('hide);
});
I have a modal and I need to trigger it inside a javascript function. Here is my function:
$(document).ready(function () {
if (sMail == 202) {
$('#contato').modal('show');
} else if (sMail != 0) {
console.log("error");
}
});
and my modal
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true" id="contato">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
when the function is executed, the page goes a little darker, just like when modals are open, but it doesn't show it :(
It works here: https://jsfiddle.net/jyax9d3f/1/ and also works with a button.
I ended up using alert instead of modal.
I'm working on two different things with a Bootstrap Modal. The first is to dyanamically load them from an MVC partial view. That part seems to be working. Now I'm trying to get the Modal to center on the page.
I'm working off of this example but can't seem to get it to work. https://www.abeautifulsite.net/vertically-centering-bootstrap-modals
I changed the name of dialog id in the JavaScript to ".modal-container" so that it should find my modal. Other than that I don't see anything else I would need to change. I've looked at the F12 Dev Tools and I don't see any errors.
Index.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div>
<div class="container">
#Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { #class = "modal-link btn btn-warning" })
</div>
</div>
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript">
//**** Bootstrap Modal - used with Partial Views ***********************
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/**
* Vertically center Bootstrap 3 modals so they aren't always stuck at the top
*/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-container');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
</body>
</html>
Controller
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
return View();
}
public ActionResult TestModal()
{
return PartialView("_TestModal");
}
}
_TestModal.cshtml
<div class="modal-body">
<h4>
Are you sure you want to delete this cost center from all clocks in the group?
</h4>
#using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
{
<div class="row">
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
EDIT: I should have mentioned in the initial post that the Modal just displays at the top of the page and goes to 100% width.
Well, I noticed (what I believe to be) a fairly simple mistake in your code just by looking at it:
dialog = modal.find('.modal-container');
finds any element with a CLASS of 'modal-container'.
In your code snippet, however, you have the ID of the div set to 'modal-container', not the CLASS.
So that line of code above is not locating the div you want. In fact, I don't think it is finding any elements (since there are none with a class of 'modal-container').
So maybe change it to something like:
<div class="modal fade modal-container" role="dialog">
<div class="modal-content">
</div>
</div>
OR leave the HTML the same and change the modal.find() to say something like:
dialog = modal.find('#modal-container');
Let me know if that helps.
Edit:
Your modal is full width because your Bootstrap modal structure is off. You are missing a div.
This is what you have:
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
here is what you need (and should fix your problems):
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
adding a div with the class of 'modal-dialog' should help.
Oh, and change the modal.find() to:
dialog = modal.find('.modal-dialog');
I am working on a Wordpress plugin where I want to open a pop-up modal when I click on one of my plugin sub-menus. I can trigger the modal using a link or a button, but I want to load the modal at the time I click on the submenu.
Code for menu and submenu:
<div class="wp-menu-name">Smart Form Builder</div>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head">Smart Form Builder</li>
<li class="wp-first-item">
<a class="wp-first-item" href="admin.php?page=smart-form-builder">Create New Form</a>
</li>
<li>
Form List
</li>
<li>
Support
</li>
</ul>
</div>
Code for my model:
<div class="modal fade" id="modal_choose_ur_form" tabindex="-1" role="dialog" aria-labelledby="modal_choose_ur_formLabel">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><h3>Choose Your Form</h3></h4>
</div>
<div class="modal-body">
Click
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now i want to pop up the modal when i click on Create New Form submenu. So what i have code in my sfb_create_form_page function?
I tried using various way of using javascript like
<script type="text/javascript">
$(document).ready(function () {
$('#modal_choose_ur_form').modal('show');
});
</script>
this is working for a simple HTML page quite well but not for my plugin. What can do can anyone help?
Here you go. Link
You need to fire click event on ul li . And open popup when click event is generated.
$(document).ready(function () {
$(".ulLiOuter ul li").click(function(e){
e.preventDefault();
$('#modal_choose_ur_form').modal('show');
});
});
I am using like this.
Go to wp-admin/nav-menus.php page and open the "Show Settings" from top, Check the (XFN) checkbox then write to xfn input some rel value "like a modal" than add your .js file this code
$('a[rel="modal"]').click(function () {
$("#modal-id").modal();
});
I need a simple demo of how to launch and close a YouTube video in a Twitter Bootstrap Modal from JavaScript (rather than an anchor tag click).
So far I can launch it just fine, but on close it keeps playing in the background.
Here's my html:
<div id="myModalThumbnail"><img src="http://placehold.it/250x150&text=Video%20Thumbnail">
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Javascript:
$('#myModalThumbnail').click(function () {
var src = 'http://www.youtube.com/v/KVu3gS7iJu4&rel=0&autohide=1&showinfo=0&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
And a jsfiddle: http://jsfiddle.net/VtKS8/5/
What next?
Well, looks like all I needed to do was remove the src attribute on the button click.
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
JSFiddle: http://jsfiddle.net/VtKS8/6/
This is the updated version for bootstrap 3 using the built in bootstrap hooks
<script>
$( document ).ready(function() {
$('#audiomodal').on('hidden.bs.modal', function () {
$( "audio" ).attr('src', '');
});
});
</script>