Angularjs - How to open custom modal on leaving the page? - javascript

I'm in a bit of a pickle.
I have a form in the page. When user makes it dirty and tries to leave the page, a custom modal (mostly bootstrap modal) should pop up with a confirmation message as in "are you sure you want leave?"
I made a plunker which uses native browser's alert box (and also bootstrap pop modal). Alert box works - commented out. But modal is not working.
http://embed.plnkr.co/6LHacFZhZ74TxmyFY8f8/preview
Any help would be greatly appreciated.

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.

How determine what Javascript code triggerd a modal dialog box?

I have a web page that uses several jQuery plugins. One of them is popping up a modal dialog box that has the title "Error" and no other information. I used the "inspect" option in Chrome DevTools to inspect it. But all I see is some HTML elements and not much else to help me figure who is popping up this modal dialog box (see HTML snippet below)>
Is there a way to use Chrome DevTools to have it break into the debugger when any modal dialog box is popped up?
Here is the dialog box's HTML:

Open confirmation modal pop up from button click inside chase paymentech Irfame

We have an Asp.net mvc website with credit card processing view. The view basically has a Chase Orbitel paymentech Iframe. We want to display confirmation modal pop up before user click the button in the Iframe to submit the payment. Our problem is that as soon as we click the submit button inside the chase Iframe , we don't know how to display the modal using jquery/JavaScript. We are still new with callbacks. Any suggestions and help is greatly appreciated.

A replacement for window.onbeforeunload in javascript or jquery

Currently the functionality in my asp.net project is as follows:
A user controls is opened in showmodaldialog. The user does some functionality. But as the showmodaldialog is an window, it has close(x) button. Upon clicking of this close(x) button I have written window.onbeforeunload function which displays a message to user as a warning. And asks him to click on either on OK or Cancel buttons which are default in confirmation box that is shown in window.onbeforeunload.
But now I want to replace this functionality with something better. I want to display my own custom dialog with custom buttons with their own custom functionality.
Basically I want to make sure that once user starts the functionality in the user control, he should finish it and if he clicks on close(x) button he is to be shown my new custom dialog and need to prevent him from closing showmodaldialog.
Can anyone please suggest something which I can use in my situation?
Thank you.

Block rest of the view except a particular element

Sorry for the title couldn't come with a better one...Okay here's is my doubt, when we display a javascript alert using alert("Some text") we see the alert dialog , Now the enter UI except the dialog box is unresponsive unless we hit Ok or close the alert window, Same goes for the confirm dialog. I am trying to build a widget to display my custom Confirm dialog using HTML elements but I don't know how to block the UI, The user if he wants can ignore the dialog & click other elements on the UI, Any suggestions or workarounds on blocking?
You could build a simple overlay with your dialog. Your dialog could be absolutely positioned on the screen, allowing users to either click it or other elments to the side of it.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Categories