I am using Lean Modal for a Modal on my web app.
Lean Modal Website: http://leanmodal.finelysliced.com.au/
Its all working fine. I just want to add the event "Esc Button Click" which closes the modal. How can I do it? Please advise.
Based on the demos on their homepage, you can close the modal by clicking outside it. You just need to trigger the same click event when ESC key is pressed. This ensures that the closing is actually done by the plugin itself and not by you.
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#lean_overlay").trigger("click");
});
Do something like
$(window).bind('keyup',function(e){
if(e.keyCode == 27)
$('#signup,#lean_overlay').fadeOut();
})
For the example on demo page
<a href id="modal" tabindex="-1" >Click to open </a>
add tabindex="-1" if you are using jquery .
Related
Been working for about 2 weeks to get a CRUD system working with knockout and it's slowly coming along. I keep hitting issues everytime I try to add buttons.
Currently my biggest issue at the moment is that my add button which is suppose to clear all values from my news and give me a blank form to fill in. Currently I have it loaded in a modal form using bootstrap. On my site the screen fades as if it's about to show you the modal DIV but nothing happens.
http://jsfiddle.net/rqwku4kb/3/
self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
self.currentIncident(null);
;
};
Would anyone have any ideas?
Use Knockout to control your modal, just like everything else. If you're reaching around the viewmodel to fiddle with the DOM, things will go wrong.
Twitter bootstrap 3 Modal with knockout
Modals will close when the background is clicked so you need to suppress that using one of two ways. Either prevent the closing of the modal due to a background click using bootstrap attributes as below:
Via javascript :
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
HTML:
<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">
Or alternatively suppress the background click event. When you click on the new button the click event fires for the button and then bubbles / propagates up through the DOM thus triggering a background click which in turn closes the dialog again.
So either suppress propagation in the handler:
self.AddNewIncident = function(data, ev) {
var id = this.ID;
$('#myModal').modal('show');
self.currentIncident(null);
ev.stopPropagation();
};
or in the click binding such that knockout will do this for you:
<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>
I am using this code, which is taken almost out of the box from the bootstrap docs, to get a simple collapse behaviour for a button (I converted the button to a link):
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTree" aria-expanded="false" aria-controls="collapseTree">
<b>click me</b>
</button>
<div class="collapse" id="collapseTree">
<div class="well">
<h6>Example text goes here</h6>
</div>
</div>
Now, what I am trying to do is to be able to close the text when the user clicks outside the button. I know that is asked many times in stack overflow but jQuery is NOT AT ALL intuitive ! at least for a beginner like me, so I am not really able to adapt any of the solutions proposed on this SO answer to get the desired behaviour.
For example, I am using this script (concept borrowed from here to try to control the outside click behaviour of the above code :
<script>
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".btn-link").hasClass("collapse");
if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
$("button.data-toggle").click();
}
});
});
</script>
but of course with no luck. Any hint would be greatly appreciated !
UPDATE
Another try with no luck here.
you could use the following:
//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
var container = $('.btn-link');
if (container.has(e.target).length === 0) {
// the closing function
}
});
This is how I did it in Coffeescript for Bootstrap 4 with a non-standard navbar.
$(document).click (e)->
#console.log e.target
unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
$('#toggle-menu').collapse('hide')
So basically, unless you click the button or the menu, close the menu.
Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though. Don't know how to fix this.
How can i remove the focus on close button in jquery dialog when tab key is pressed.For buttons i have used tab-index=-1 and it worked.
Attaching the
$('.ui-widget-content').blur();
$('.ui-widget-content :button').blur();
$('.ui-dialog-titlebar-close :link').blur();
$('.ui-dialog-titlebar-close :button').blur();
$('.ui-icon').blur();
$('.ui-icon-closethick').blur();
$('.ui-dialog').removeClass('ui-state-focus');
http://jsfiddle.net/bharatgillala/a0ft8dm3/1/
I have tried the above statements but did not work for me.
Add tabindex="-1" to close button and trigger blur event on it. You don't need most of the stuff you tried, it can be as simple as
$(function () {
$("#dialog").dialog();
$('.ui-dialog-titlebar-close').attr('tabindex', '-1').blur();
});
Demo: http://jsfiddle.net/a0ft8dm3/4/
Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.
Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});
Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/
I've got a bootstrap popover working so:
Popover opens on click
Popover closes when you click outside the popover
Popover has default href for if JS is disabled
Code is:
<a class="badge badge-popover"
data-original-title="title here"
data-trigger="focus"
data-placement="right"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>
$('.badge-popover').click(function(e){
e.preventDefault();
}).popover();
It's working fine across all browsers, but not on the iPad. Any ideas why? Where am I going wrong?
Thanks :)
I am using Jquery 1.9.1, bootstrap 2.1.1
Try to use the hover event:
This should trigger the Popover on Desktop via hover and on mobile/tablet via click(touch).
<a class="badge badge-popover"
data-original-title="title here"
data-placement="right"
data-trigger="hover"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>
Refer following code snippet to get it works:
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
This is the easiest way of detecting clicks on the body and close all the tooltips on the page.
You can check the live example here
Thanks!
Just encountered the same problem. Changing data-trigger="focus" to data-trigger="click" works. Hover also works.
Changing data-trigger="focus" to data-trigger="click" works almost ok, but the problem is that the popover remains open even when you click outside of it and you can close it only if you click on the element, that initiated the popover...