Elementor Pop-up with jQuery - javascript

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.

Related

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.

Multiple level of jQuery Dialog

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/

Bootstrap modal dialog tabbing in behind page

When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.

How to implement Squeeze Box sample code in JavaScript and HTML?

I desire to display a popup. When that popup appears, it has to blur and invalidate the background. The popup contains my content, and it is closed when the user clicks the close button. I choose, squeezbox. but I don't know how to implement it. Please help me with running sample code of squeezebox. I already implemented one set of code, but it's not working.
Do you mean a modal? Something like Bootstrap's Modal?

Popup form using asp.net and javascript

Hi I am new for web development. I have an application which consists of a button. On clicking the button a popup window should appear which consists of 2 fields and a button. On clicking button in Popup window 2 fields in popup has to be saved in to database. How to implement this using ASP.NET and javascript ?
Try even this one...
http://www.scriptiny.com/2009/05/javascript-popup-box/
I suggest you try this...
JQueryUI Pop Dialog
First you need to add jquery library in your page then on the next line add the library for the jqueryui
It's very easy...

Categories