Close dialog box from other function using jQuery - javascript

Hi I have a dialog box it shows some menus and when I click on any menu it shows another popup window. When I finished my work from popup, I want that the dialog box closes automatically.
Please suggest how can I do this.
jQuery:
function() {
$( this ).dialog( "close" );
window.parent.pmsSession.scrollposition = true;
window.parent.pmsSession.appointmenttime = fromTime;
window.parent.$("#gridcontainer").reload();
CloseModelWindow();
$( '#options' ).dialog( "close" );
}

When you finish your work-- write this
$("#idDialog").dialog("close");
it means you are manually closing the dialog

When you are done, you just call:
$("#dialog_id").dialog('close');

When you finish your work-- write this
$("#idDialog").dialog("close");

Related

Close modal on button click Elementor

I hope you are having a nice day.
I am working with the following menu:
The site with which I am working is a Single Page, I need that when clicking any of the buttons that work as anchors to different sections (referenced by ID) they also close this popup. Any idea how to do it? I can work perfectly with JS and jQuery, I know these technologies a lot.
Thanks for reading and giving me your time. I await your responses. Greetings.
I have this working for me:
give the buttons on your popup an additional class of 'close-popup'
add an HMTL widget to your popup with the following
<script>
jQuery( document ).ready( function( $ ) {
$( document ).on( 'click', '.close-popup', function( event ) {
elementorProFrontend.modules.popup.closePopup( {}, event );
} );
} );
</script>
I'd like to be able to claim the credit for this, but it goes to shilo-ey

Disabling window while opening popup

I've looked around this site a bit, and can't seem to find a solution that works for me...
I'm trying to disable parent window while opening a popup- I've tried:
<body onClick="func1()" onFocus="func1()">
with
editwindow = window.open("","","width=300, height=300");
with the following function in my header:
function func1(){
if (editwindow && !editwindow.closed) editwindow.focus();
}
My problem is that this method doesn't effectively "disable" the parent window. I need links and buttons not to respond when clicked on. It seems like the browser is giving preference to the links first, and then re-focuses to the popup window.
Any help would be appreciated.
Instead of reinventing the wheel, and dealing with pop-up blocker headaches in the future ruining your User Experience, you might consider using jQuery UI's modal dialog.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>

How to stop Jquery executing on page load

I have a piece of Jquery which I am using to force a div to have a 'slide in' effect upon a user clicking on another div (a button which I define). However, upon page load, the jquery has executed and the div which is supposed to slide in upon user click, has already appeared and been revealed. Please can someone tell me how to stop this, and make it so that it's not active upon page load, and only works upon user click. Thanks.
Here is my code :
$( "#open-nav-3" ).click(function() {
$( "#open-nav-menus" ).slideToggle( "slow" );
});
open-nav-3 is the button which the user clicks to make the content appear, and open-nav-menus is the div ( content ) which appears.
I expect this is probably very simple, but I am a novice with all things Javascript.
I guess you just need an additional
$( "#open-nav-menus" ).hide();
to hide the element on page load. Add it before the event handler:
var navMenu = $( "#open-nav-menus" );
navMenu.hide();
$( "#open-nav-3" ).click(function() {
navMenu.slideToggle( "slow" );
});

jQuery dialog/javascript boolean not working

I have no idea if I'm doing this right but I'm trying to make it so when the delete Button is clicked a Dialog in my jQuery UI comes up
try adding:
$( this ).dialog( "close" );
on the close

jQueryUI dialog box height grows too tall

I have a jQueryUI dialog box that loads its content the moment someone opens it using the "open" event to initiate the $('#dialogDiv').load() call.
Works great except the dialog box grows extremely tall if there's a lot of content being loaded. What I want is to limit the height. The maxHeight jQueryUI dialog option would seem to work perfect, except it only takes effect the moment you resize. The initial load will grow the dialog really tall and then when you try and resize, it immediately shrinks to the maxHeight.
How can I make a dynamically loading dialog box that won't grow beyond a certain height?
Adding the CSS position:absolute;overflow:hidden for class .ui-dialog will fix the problem.
Use height option while initalization...
for eg-
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
here you can see "height:140"
this defines that the dilog will be of only that size, no matter how much data is inside..
for more detais about the events,options,methods download(from here), extract and check out the
jquery-ui-1.8.5.custom > development-bundle > docs > dialog.html

Categories

Resources