How to close modal popup only when pressing the cancel button? - javascript

I have a simple modal and I was wondering how can I only allow the modal to be closed when clicking the "X" button or the cancel button. Now when the user clicks outside the modal area.
Here's my code:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>


use this..
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or directly put it in your div
<div id="myModal" class="modal hide" data-backdrop="static" data-keyboard="false">

Related

Bootstrap Modal not popping alert when clicked

Bootstrap Modal button save is not working when clicked.Below is my jquery:
$('#add-more-academic').on('click',function(){
$('#myModal').modal();
})
//==================================================
$('.SaveAcademic').on('click',function(){
var academic = $('#new-academic').val();
alert(academic);
Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:
<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" class="modal fade" role="dialog">
<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">Academic Year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
</div>
</div>
</div>
</div>
</html>

make modal popup while clicking on menu

I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})

modal on appears after each item is clicked..can only loop the first item,then function doesnt work

I wanted to create as pop up modal after each button has been clicked on saying, you have clicked on all the buttons. I got the modal window to pop up with just one button but I cannot get the the rest of the other buttons to load when I create the same class. Please help,thanks
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="mybox modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class=" mybox modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="win" role="dialog">
<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">You won</h4>
</div>
<div class="modal-body">
<p>Congrats.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {
var bx = this.id;
if (Boxes.indexOf(bx) >= 0) {
$("#myMod").modal("toggle");
} else {
Boxes.push(bx);
}
if (Boxes.length == ttle) {
$("#win").modal("toggle");
}
});
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>

display a Modal or a dialog when a button is clicked in infowindow in javascript?

I have to display a new modal when a button is clicked in the infowindow. When I click MORE button in info window a modal should appear with more information regarding the marker while disabling the background.
I have tried in the following way but it is not working:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have added a button in info window to display the modal:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
But the above code is not working.

Can twitter bootstrap been set nesting?

I want to make a sub modal in a main modal.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Main contant
<!-- Button to trigger modal -->
Launch sub demo modal
<!-- Sub Modal -->
<div id="subModal" 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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Sub contant
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The problem is that when I close the sub modal,the main modal was closed together.
Can I set the close event for every modal on one's own?

You don't need to have each modal nested on the parent modal. To you archive what you need, separe the modals, so each node modal will have it own close data-dissmis attribute, and when triggered it will dissmis only that modal. (And as you need to work with submodals, it will fit your needs, because even with separete html trees, the submodal will be called above the main modal, or the first one)
Heres the fiddle example ( The HTML are a bit desorganized, sory about that ):
http://jsfiddle.net/h3WDq/202/
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
Launch Modal
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
As i said, you going to create two modals separated, and each one will have its own data-dismiss button, and when them get called, they will just close that specific modal, and as you can see in my example they work as submodals.

Categories

Resources