I have an html div fade that I want to do something when a user clicks outside the div and close it, or click on the dismiss button in the div itself.
I can easily fire an EventListener for the dismiss button but is there a way to handle user dismissing the div by clicking outside it?
Note: The current design is the div closes if user clicks outside it.
<div class="modal fade" id="show_laptop_instructions" tabindex="-1" role="dialog" aria-labelledby="show_laptop_instructions_title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: fit-content" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_title" style="font-size: large">Laptop Instructions for <strong><span style="color: green;" id="msg_hostname"></span></strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class=container>
<details open>
<summary ><strong>Instructions</strong></summary>
<div id="msg_instructions"></div>
</details>
</div>
</div>
<div class="modal-footer">
<button type="button" id="dismiss_laptop_instructions" class="btn btn-secondary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
Related
For those code, there have a button "Launch modal" to open the Model, then in Model, also have a button "Launch modal2" to open a new model(just call model2) on Model. When I click the close button on model2, all of the Model will de dismiss. How can I fix that?
Please note that I need to put model2 in Model for display data.
Thanks.
http://jsfiddle.net/ve42xs6w/
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
The problem is that you are putting the second modal inside of the first modal. Bootstrap just closes all modals that the close button is inside of, so if you nest them the second close button will close all outside modals.
To fix this you can just move the whole div#myModal2 down under the first div#myModal so they are separate elements.
Like this: http://jsfiddle.net/e92o1j3s/3/
I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>
Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});
I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;
$('#apply_Compensation_Leave').show();
Modal code
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Did i miss anything?
Adding Javascript file..all javascript functions in seperate .js file.
EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
var html = "";
html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
return html;
});
EmpcompensationAdapter.method('applyleaves', function() {
$('#apply_Compensation_Leave').show();
});
EmpcompensationAdapter.method('showLeaveView', function() {
$('#apply_Compensation_Leave').hide();
});
When i click Back button, by calling the function showLeaveView();
Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting × in your button HTML.
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is a Demo
Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>
Here is a Demo with the valid markup.
The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');
Try this demo.
You are opening your modal using JS.
You can use this.But this has wrong markup as #Alorika Mentioned
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript
$('#apply_Compensation_Leave').show();
Try this layout :
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> <center>Title here </center> </h4>
</div>
<div class="modal-body">
...Body here...
</div>
<div class="modal-footer">
<button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>
</div>
</div>
</div>
</div>
I am creating, upon the press of a button, a modal window that comes from an handlebars template. At the document's load, the modal window is NOT initialized so you can't tie an event to it such as :
$(".modal").attr("someAttr").change(function(){});
Here is the code of the modal window and the hidden button that can be called to show the window once it's initialized.
<script id="informationModalTemplate" type="text/x-handlebars-template">
<div class="modal fade informationModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{Title}}</h4>
</div>
<div class="modal-body">
<textarea id="informationTextContainer" name="informationTextContainer">{{Content}}</textarea>
<a onclick="" class="button button-rounded button-reveal button-medium button-green tright"><i class="icon-thumbs-up"></i><span>OK</span></a>
<a onclick="" class="button button-rounded button-reveal button-medium button-red tright"><i class="icon-thumbs-down"></i><span>Cancel</span></a>
</div>
</div>
</div>
</div>
</div>
</script>
Can someone please tell me how to detect when such a window gets closed?
I am experiencing a problem with one of the three modals running on one page. When it's visible and you click it's body it opens the other one behind it.
This is the opened one:
<span class="help-block">#Html.Raw(ptype.Description.StripHtml())</span>
<div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaModalLabel">#Html.Raw(ptype.Description)</h3>
</div>
<div class="modal-body">
<iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
</div>
</div>
</div>
</div>
And the one that opens by clicking the other body:
<input type="radio" name="paymenttype" id="#ptype.Id" value="#ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
<div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
</div>
<div class="modal-body">
Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />
Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
<i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
</button>
<button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
<i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
</button>
</div>
</div>
</div>
</div>
EDIT! This reproduces my problem: http://jsfiddle.net/mPWw4/3/
Why is the two connected so that a click on the first ones body opens the other?
Move your modals outside of your main html. I would recommend somewhere close to the to the end of your </body> tag.
Also just as a side note some of your markup on the modals e.g. <div class="modal-dialog"> and <div class="modal-content"> is for Bootstrap 3.0 since your using bootstrap 2.3.2 you don't really need it.
I updated your fiddle by moving the modals out of the main html and it works as expected.
http://jsfiddle.net/mPWw4/4/