window.onbeforeunload = function() {
openDialog(dialogs.whyNot)
}
I want to open some dialog before user leave page , I've found that I can show some message before leaving a page by making it like this :
window.onbeforeunload = function() {
return 'Message'
}
But instead of messages I want to show my own dialog , is it possible to make ?
By my own dialog I mean:
No you cannot show anything like a custom dialog when the page starts unloading. You have to use the standard alert box.
window.onbeforeunload = function() {
window.alert('Message');
}
You could try alert, if all you want is for the user to press OK:
window.onbeforeunload = function() {
window.alert('Message');
}
If you want OK/Cancel buttons, you can use confirm (the window prefix can be dropped). Confirm will return True if the user clicked OK, False if the user clicked Cancel. Here is an example:
window.onbeforeunload = function() {
if(confirm('Message')){
console.log('user clicked ok');
} else {
console.log('user clicked cancel');
}
}
Edit (after question edit):
You will need to do a modal popup with html and css, see here for an example:
https://www.w3schools.com/howto/howto_css_modals.asp
For a jquery example see here:
How to display Custom Dialog box on button click
Related
we r having functionality, when we edit the draft for specific job role.. It is redirecting to that edit draft page. This page has cancel button, on click of which we get confirmation box.. having msg ("Directing back to the previous page, changes made will not be saved.") also "OK" & "Cancel" button.
My Problem
In current code when I click on "OK" It is redirecting to parent page (which is correct) but when I click on "Cancel" button or cross mark of confirmation box, still its redirecting to the parent page (which is wrong) it should remain on the same edit page when I click on cancel button(or cross mark). I need help for this. Thanks.
****JS code for cancel button:****
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function ()
{
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved."))
{
}
});
UI code in soy template:
<button data-dom-id="sdd-ejrp-btn-cancel" onclick="{if $pageId > 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$pageId}'{/if}{if $pageId <= 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$parentPageId}'{/if}" class="aui-button aui-button-link">Cancel</button>
You need to return false; if OK is not clicked. Below is the code:
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function() {
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved.")) {
console.log("Clicked Yes!!.. It will redirect.");
} else {
console.log("It will stay here... ");
return false;
}
});
I think the issue is using <button> inside a form. Whenever a click happened, the form will submit. Try changing <button> tag with <span> or other elements
I need to display a fancybox using onbeforeunload event or any other possiblities, and instead of native confirm box, i need to display my customized fancybox.
Here's my current code..
window.onbeforeunload = function(e) {
$.fancybox({
content : 'test'
});
return false; // if this line commented, browser won't wait for confirmation
}
Please provide working answers. Thanks..
Do you need something like this?
function unload(){
$.fancybox('<div>Your custom element<div>');
}
$(document).ready(function() {
window.onbeforeunload=function() {
unload();
};
});
Demo
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
I am trying to show div with some contents when user tries to close the window. I have done the following JavaScript code to do so:
function closeWindow(){
if(submitted == false)
{
$("#confirmation").show();
return 0;
}
}
window.onbeforeunload = closeWindow();
Whenever I close window, alert is appearing for confirmation. I don't want to show that confirmation message instead show div with id confirmation.
Is there any way to prevent that confirmation alert ?
Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.