I have a problem with the jQuery dialog popup.
Here's the code:
CLICK TO OPEN
<div id="popup_open" style="display:none">
<div class="dialog">
POPUP CONTENT
<div class="popup_close">×</div>
</div>
</div>
and the js:
$('a.popup').popup();
I wrote a simple closing script, but it only works one time.
$(document).ready(function () {
$('.popup_close').click(function () {
$('.popup_back').css('opacity', '0');
$('.popup_cont').css('opacity', '0');
});
});
How do I make the popup close every time?
One solution (though maybe not the best) is to add that click event on the close button in the function that opens the popup. If you go into developer tools and manually add the click event to the close button after the modal is open, it works every time.
Something like this could work:
$(".popup").click(function() { // Put the correct selector here, this is just a guess
// Opens the popup
$('a.popup').popup();
// Binds the click function
$('.popup_close').click(function () {
$('.popup_back').css('opacity', '0');
$('.popup_cont').css('opacity', '0');
});
});
There may be a cleaner solution but this is quick and dirty.
Related
I am trying out Modal boxes in my project and I came upon a problem, that I am unable to close the modal box when a click is made outside of the Modal box. I tried the following code, but this closes the modal box at the same instant it is opened. I tried using setTimeout method too. Its not working. Could anyone help me out with this?
const gstModal=()=>{
g=document.getElementsByClassName("modal-gst")[0];
g.style.display="block";
document.addEventListener('click', function(event) {
var isClickInside = g.contains(event.target);
if (!isClickInside) {
closeGST();
}
});
}
function closeGST(){
document.getElementsByClassName("modal-gst")[0].style.display="none";
}
If you have an overlay div along with the popup then you can handle the click easily on the overlay div click.
Here is a sample modal popup by using HTML & JS
https://www.w3schools.com/howto/howto_css_modals.asp
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/
I am using the bootstrapX clickover demo'ed here: http://www.leecarmichael.com/bootstrapx-clickover/examples.html
<img class="img-circle" src="something" alt="something"
rel="clickover"
onclick="loadData(this, somedata)" />
loadData(element, somedata){
if(!$(element).attr('data-content')) {
// build clickover flyout html
$(element).clickover('show');
} else {
// do nothing clickover is already attached
}
}
This works... almost.
When I click the image element for the first time I have to close the clickover by clicking on the image otherwise it does not close even if I click open other clickovers or just click on the body of the page.
Any following clicks that show the clickover can be hidden by a click anywhere else which is how it should work. I have tried to close all other clickovers, unbind the click event and more with no success. I need to bind the loadData event in html and not in javascript as the clickover's onShown because this code runs in a loop and this data is specific to the element which is not very uniquely identifiable.
Any idea on how I could fix this?
The behavior you describe seems the same for global_close=0.
$(element).clickover('show'); don't set default options.
Use $('.img-square').clickover().click(); in stead of $('.img-square').clickover('show'), see: http://bootply.com/66601 and https://github.com/lecar-red/bootstrapx-clickover/issues/42
How can I close all opened dialog boxes in jQuery?
The situation is next: I have a simple page without dialogs. It has some buttons what open it owns dialogs.
When I click on a button I need to close all opened dialogs.
Here is the HTML:
<div id="buttons">
Button 1
Button 2
Button 3
</div>
<div id="dialog_1" class="dialogbox">...</div>
<div id="dialog_2" class="dialogbox">...</div>
<div id="dialog_3" class="dialogbox">...</div>
And here is the jQuery:
$(function() {
$('#buttons').find('a').click(function() {
// close all dialogs
$('.dialogbox').dialog("close");
// find out clicked id and open dialog
var nr = this.id.split("_")[1];
$('#dialog_'+nr).dialog();
});
});
The Chrome say: Uncaught Error: cannot call methods on dialog prior initialization; attempted to call method 'close'.
I was tried to check $('.dialogbox').dialog('isOpen'), but same result.
How can I close all dialogs?
Since they all inherit the same class, this is the best way to select all and close by:
$(".ui-dialog-content").dialog("close");
You can simple try this as they all have the .ui-dialog-content class, so select by that and close them, like this:-
$(".ui-dialog-content").dialog("close");
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});