Multiple level of jQuery Dialog - javascript

I am trying to implement multiple level of jQuery Dialog with modal behavior. I have main page which open up first dialog box from where second dialog box can be open all both should be modal box.
First issue is I am getting error on fiddle when clicking main page link and second its not creating dialog as required.
Fiddle

A bunch of things going on:
In the jsFiddle, you need to add jQuery UI and a theme as external resources. Selecting just the jQuery library is not enough. jQuery UI Dialog is part of the jQuery UI library, not part of the jQuery core library.
Since your click events are on <a> tags, you need to cancel their default behaviour. Make a click handler for your <a> tags, and cancel the default behaviour first before doing anything else:
Gold
$("#clickForGold").on("click", function(e) {
e.preventDefault(); <--- this stops the link from navigating
//now do other stuff
});
Set up your dialogs at page load, and then open them when you need to. Use the autoOpen:false parameter to keep them from opening when the page loads. Open them as follows:
$("dialog-id").dialog("open");
Don't open a modal over a modal. It's extremely poor for usability. Close the first one before opening the second one:
function clickForSecond() {
$("dialog-id-first").dialog("close");
$("dialog-id-second").dialog("open");
}
A working example:
https://jsfiddle.net/5ucat3f7/1/

Related

Elementor Pop-up with jQuery

I have a problem. I made a custom Pop-up using elementor and now added a custom jQuery code for the pop-up menu to close on the menu-item click. I have ordered the Elementor to open via action in elementor and close via the code. Picture of elementor action for popup
The code is following.
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup .menu-item', function(event){
elementorProFrontend.modules.popup.closePopup({}, event );
});
});
</script>
The problem is, that every click on different elements on the page, for example the admin bar, the contact form etc, the popup opens, event though not ordered to do so.
Has anyone had the same issue with elementor popup?
Has it something to do with the jQuery document value? Or should I seek help from elementor?
Got the fix. It is an Elementor bug.. They still have not fixed it, even with the latest update. The issue was not with jQuery code, but with Elementor settings.
I had to eliminate all the popup conditions and triggers from elementor side and just use a dynamic elementor button opening and jQuery button closing.
Somehow the triggers produced the bug, that opened the popup on a random page click.

disable contextual menu inside the paypal-api button iframe (or any iframe)

I've built a custom contextual menu and everything is working as expected; however, they decided to add a paypal button with the new API to the one page. The button is loading inside an iframe from paypal. Is there any way to disable right clicking over an external iframe?
either native javascript or jquery (only 2 options available)
this is the current code to try this but it's not working. #paypal-button-container is the container placed on the page paypal uses to load the iframe. .paypal-buttons is the class name for a div paypal creates and .component-frame is the iframe class name inside that .paypal-buttons div.
$('#paypal-button-container').on('contextmenu', '.paypal-buttons, .component-frame', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
console.log('Right click disabled');
});
They don't care about showing the custom contextual menu for the paypal, just looking for a way to turn off right clicking on the paypal button because it allows for view page source and other default browser things they don't want to show.
I obviously can't edit the paypal code but is there an option in the new API that i'm not seeing to accomplish this?
So (for those that skip to the bottom :)) looking for either a way to disable the contextual menu / right clicking for an iframe on my side or a paypal API option that does the same thing.

onbeforeunload change the UI of dialog box or use custom

I have a page where if user click anywhere outside form or try to close the tab a dialog box/popup should come like your changes will be discard or do you want to move.
I can do this from window.onbeforeunload event but the problem is that i need to use a customized pretty dialog box instead of default one if any alternate approach is there.
If we use any modal dialog box but i don't know which event to call on that dialog also tried window.onload but it not fulfill my problem as i need to ask the viewer before moving to other page.

bootstrap datepicker in bootstrap modal

I have a modal window in the #editorWin div, which can be opened from multiple locations on the page. Each time it has a different content, coming from an Ajax query in the following way:
$('#editorWin').on('show.bs.modal', function (event) {
$('#modalCont').html('Loading...')
$.ajax({
// load AJAX content and overwrite Load... message
})
});
When the modal window is opened, I want to use a Bootstrap Datepicker widget in it. When I click on the datepicker however, the AJAX loaded content of my modal window disappears.
I suspect that opening the datepicker might trigger the show.bs.modal event and that messes with my former function but I'm not sure.
There is no JS error in the console.
I found the answer in a similar question: Bootstrap datepicker not woking in modal
To solve the issue, the show.bs.modal had to be replaced by shown.bs.modal.

How can I use two twitter bootstrap modals in succession?

This is a minor, subtle point, but in UX, subtlety makes all the difference.
I have crafted a 1-page web app using Twitter bootstrap. In one particularly important part of my application...
My user takes an action,
I present a Confirmation dialog (technically a bootbox confirm)
The user clicks OK to confirm
the modal disappears, an action via ajax takes place,
then I display a secondary modal (bootbox dialog) with a success message.
What I am trying to do is change step 4. I don't want the darkened overlay to disappear, only the dialog box itself. Instead, I would like to leave the background dimmed and display a spinner (spin.js of course) that will be replaced by the success modal upon ajax completion.
In short, I think I may need to override the default behavior of the success method of bootbox confirm.
Is this possible?
It should work if you listen for the close event on the first modal
$(document).on('close', '#firstModalId', function(){
$('#secondModalId').modal('show');
});
You can also try the closed event. If timed right the user shouldn't see both at the same time and they shouldn't see one disappear when the other opens. Be careful of crashing IE when using two bootstrap modals at the same time.
One other possibility I've used is to open the second modal without a backdrop and at the same time changing the z-index of the first modal so it looks like it's gone. When the second modal closes you can either return the first modal to its original z-index or close it like normal. Whether you can take this route depends on whether or not you want the backdrop click behavior in the second modal.

Categories