Develop Reference

how to prevent window back button and close tab with javascript

now im doing laravel project. i want to implement javascript code only for preventing the back button and close tab window. i read the article that we can use onbeforeunload(). but this code not suitable with me. because the warning message will display when i want to go to another link menu on my site..
here is my code
window.onbeforeunload = function() {
return "Do you really want to leave?";
};
above code still have problem to me :
i must click at list 1 time on the side. then click close tab, so the pop up will display. if i dont click, the pop up not display and directly close the tab.
im using opera browser but the custom message not display same as what i type. it display "Changes you made may not be saved.". How do i could display the sentence as same as i type?
is there any other code that just prevent only for back button and close the tab? so went i want to navigate to other link menu on my site, the warning message not display.
please help

//you should $event.return = "";
window.addEventListener("beforeunload", function ($event) {
return $event.returnValue = "";
})

Cannot open second Modal (or only opens modal-backdrop) after closing Modal (Bootstrap Modal with Google map) using Angular, JavaScript and jQuery

UPDATED
I need some fresh eyes on my problem. I have done a lot of research and have tried everything I can think of, but for some reason I simply cannot get my modals to behave in the way I want them to.
My issue:
After opening modal one (which has a Google map and Google auto complete address field), I trigger via a button click the close of modal one, and opening modal two. But modal two does not open, or you only see the modal-backdrop.
My code:
(1) The first modal is opened via this click event:
<a class="shop-btn" id="5G router-32" (click)="startFivegJourney()">buy</a>
(2) The click event fires this method which opens the #five-g-product-modal. The reason for the additional shown.bs.modal code is simply for setting the z-index of the modal, making sure that the Google autocomplete address field does not display behind the opened modal.
startFivegJourney() {
if (this.cartService.simsInCart.length > 0) {
$('#modal-clear-cart').modal('show');
} else {
$('#five-g-product-modal').modal('show');
$('#five-g-product-modal').on('shown.bs.modal', () => {
$('.pac-container').css('z-index', $('#five-g-product-modal').css('z-index'));
});
}
}
(3) A button click event fired from modal one that is now open, triggers the method below, which hides modal one.
checkFiveGCoverage() {
$('#five-g-product-modal').modal('hide');
$('#five-g-product-modal').on('hidden.bs.modal', () => {
$('#five-g-coverage-modal').modal('show');
this.openModal();
});
}
(4) After modal one has completely closed, a simple method is called to open the new modal:
openModal() {
$('#five-g-coverage-modal').modal('show');
}
I have tried various ways of opening the modal (the modal does open on top of the first modal if I do not close the first modal), but it is as if it does not fire, or opens the modal-backdrop only. Thank you in advance!

Click on a button in a Modal Window - Protractor

I'm writing protractor tests for an existing app.
I have a button called 'Decline' in a modal window, and I'm trying to click it using:
element(by.buttonText('Decline')).click();
But I receive the below error:
UnknownError: unknown error: Element is not clickable at point (,). Other element would receive the click:
May be because I have another button called 'Decline' outside the modal window?
How do I click on the modal window's Decline button ?
Found that this is the js code that displays this Decline button.
.....
var content = {
title: 'Decline',
htmlBody: '<p>...</p> ',
okButton: 'Decline',
onOk: function() {
.....

As there are two buttons with button text Decline, How do we identity the one in modal?
One way to approach that would be to improve your locator to work in the scope of the modal content. But, since you have not provided an HTML representation of the modal I cannot provide you with a specific answer. Here are the samples that you can improve to fit your use case:
element(by.css(".modalContent button[ng-click*=ok]")).click();
element(by.css(".modalContent")).element(by.buttonText("Decline")).click();
Another approach could be to find all buttons with a specific text and filter the visible one:
element.all(by.buttonText("Decline")).filter(function (button) {
return button.isDisplayed().then(function (isDisplayed) {
return isDisplayed;
});
}).first().click();

My Colleague recommended this and it worked:
Clicking on First Decline button opens up a modal,
Sleep for some time,
Now click on the second Decline button.
element(by.buttonText('Decline')).click();
browser.sleep(2000);
element(by.cssContainingText('.btn', 'Decline')).click();
Thanks for all your help :)

Write the code
which needs to display under modal window,
inside form tag.
And serialize that form with the existing form.

Just search the button by its text and use the function click. So for you it should look like that:
element(by.buttonText('Cancel')).click();

try the below code,
var DeclineBtn = element(by.buttonText('Decline'));
browser.executeScript("arguments[0].click()",DeclineBtn.getWebElement())

How to stay fancy box popup sometime after click on the browser back button

I want to show a popup when user click on the close button or back button in browser in checkout page of my site. I have implemented the following code for that ........
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
//window.history.forward();
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
Now everything is working fine. But the final requirement is when user click on the back browser button from the checkout page, the fancy box popup appear and it will stay ~40 seconds then the page redirect to back.
I can't solve this problem. How do I stay the popup when already the page redirecting to click on the back button on browser. Is it possible? Please help me

Have you tried (#user1721135)
Jquery when back button is pressed
I understand is a different event but maybe can help :S.... Also: (#IMRAN ABDUL GHANI) Solution to browser back button click event handling

DOJO dialog not opening second time after clicking close(x) button on the upper right corner

I have a dialog button named EDIT in my page.
First time when you click on EDIT button,the EDIT pop up window appears. When I close the pop up window by clicking on the Close (x) button located on the upper right corner of the pop up window and click EDIT button again the second time, the pop up window is not appearing(opening). But after clicking on the 'CANCEL' and 'APPLY' buttons located below on the same 'EDIT' pop up window and clicking on EDIT for the second time, the pop up window opens. So there is a problem after clicking on the close button which is not allowing me to open the EDIT window again.
UPDATE:
I found the code(as below) which is not allowing me to open the 'EDIT' dialog the second time and I commented it . But commenting the code caused another problem i.e. when I click on 'CANCEL' or 'APPLY' buttons it is throwing the following error and is not allowing me to open the 'EDIT' button again by throwing the same error.

You are destroying the widget on close (destroyOnClose : true), so it isn't available to open on the second attempt.
/*
* Overload the _destroyOrHide method in rmt.NewModalPopup so
* that the popup will be destroyed instead of closed. (Close
* doesn't remove the DOM node.)
*/

Befre creating the dialog box please add the below code :
if (dojo.byId('displayQualificationPane') != null) {
dojo.forEach(dijit.findWidgets(dojo.byId('displayQualificationPane')), function (w) {
w.destroyRecursive();
});
}
dojo.destroy(dojo.byId('displayQualificationPane'));
if (dijit.byId('displayQualificationPane')) {
dijit.byId('displayQualificationPane').destroy();
}
It will destroy the widget everytime before creating it.

Another technique, similar to Himani's recommendation, but perhaps easier to use, is to ensure that the dialog contents are destroyed after the hide function is called. This way, you don't have to do any complicated checks for this when initializing your components.
hide: function() {
this.inherited(arguments);
window.setTimeout( dojo.hitch( this, 'destroyRecursive' ), 500 );
}
Or perhaps even
aspect.after( dialog, 'hide', dojo.hitch( this, function() {
setTimeout( function() {
dialog.destroyRecursive();
}, 500 );
}));