Web Design - Modal CSS Change to Display Block on Site Exit - javascript

I am trying to implement an easy way of displaying a small modal window when the user exits my Website, containing a quick and easy single question dialog, with a multiple-choice answer, and a submit button..
I'm having trouble finding a simple, straight-forward answer everywhere I've looked. Yes, I searched.
NOTE: I already have my Modal Window created, with the Form on it, and everything ready! (currently the Modal Window is set to Display None, until I figure out the following question)..
What I need to know exactly is this: What is the easiest way to simply detect when the user is leaving my website, and set the Property of the Modal Window ID to Display:Block for example, which would change it from Display:None and make it show?
I would prefer a simple script being able to detect any of the following behavior as they are trying to exit the website either by (A) clicking X on the tab, (B) clicking X on the window, or (C) hitting the back button enough times to leave my Site - at which time, the script would change my Modal's ID property from display none, to display block.. Thats it.
Thanks in advance!

JavaScript has a special event for this onbeforeunload
<script>
window.onbeforeunload = exitFunc;
function exitFunc() {
modal logic here
}
</script>

Related

Trigger an on-click overlay automatically once per user per ip

Like the title suggests, I have an overlay modal window on one of my websites. It fires every time a user clicks on a specific button. Am I able to somehow trigger that specfic button automatically once per user/ip so I can display that modal at least once for everyone, even if they don't click it? It's a good way to increase social-media fans and I noticed many websites are using this method. Is there any script that simply does that? I will provide code if necessarly although I don't see how it can help since this is more like a general matter.
Okay, looks like you want two things...
to trigger the modal to show regardless of whether the user clicks or not
window.load(function () {
//execute your modal popup here.
});
Note: You'll need JQuery for this.
to limit the window to only appearing once per user.
If your users are using a login, I'd suggest creating a new table for promos, possibly named, 'UserPromos' and create a bit field for this modal like, 'modalshown' and set it to false '0', for all users. Then, merely send that value to your page in a hidden input field, access that value from JS and if that value is '0' then show the modal with your script above and if it's '1' then don't.
Your server side code would update the value for the UserPromos.modalshown for that user in the db.
If your users are just visitors to the site, then you must use a JS cookie.

How can I cancel an alert box?

I can display an alert box as follows: alert('Please wait 5 seconds');.
Is there a way to remove this alert box after 5 seconds if the user has not clicked "OK" by that time using JavaScript?
No, you cannot do that.
As an alternative you could create some sort of modal window right in your UI.
When a native JS alert dialog is fired the browser stops everytihng, until the user clicks "OK", this goes for the confirm() funciton as well.
I recommend using jQuery's UI dialog component:
http://jqueryui.com/demos/dialog/
Highly configuratble, modal, non modal, size, and of course for your use... timed interval. Heck you can even ad a nifty timer that counts down!
As far as I know there is no way to do this using the browsers alert window. JavaScript cannot be executed when an alert box is "Alerting". However you could use a UI element with a close() method, as the displaying of such an element would not stop the browser from executing your JavaScript.
The alert can not be removed, what you can do is to make a custom alert using jquery. With jquery, you can customize your alert theme and decide how its going to be removed with a simple command like fadeOut();
This may not help the poster at all but I bet some finders readers will get through fire and flames out with this : reload the script the alert box is displayed from.
To do this you should add an invisible frame from which the alert box is fired, and reload that frame without affecting your dear front page... Not even sure if that works I'll go try and come back to this...

Close event on browser

I am using a jQuery Notification on my project.
When i close the browser , i am using the onbeforeunload and showing a confirm box to the user.
However the client is not satisfied with the default message box ,
is it technically possible to show my Notification instead of the default one.
jQuery notification comes with a question Do you want to close ? and with two buttons YES and No.
When user clicked YES it will return true ,else False
any way to achieve ? or some comments/opinion ?
Please help me .
Thank you.
Update :
window.onbeforeunload = ShowModel;
function ShowModel()
{
return show_pop_up();
}
show_pop_up()
{
return TRUE or FALSE ;
}
is it technically possible to show my Notification instead of the default one.
No. You can specify the text of the message. You cannot control the buttons, you cannot control the appearance, and you cannot replace the UI with one built from scratch out of HTML/CSS/JS.
There are very strong limitations over what you can do while the user is trying to leave the page. Browsers are designed to protect users from sites that attempt to trap them (You are trying to leave the site? NO! You are not allowed to leave until you have looked at more adverts for porn and you given us your credit card details!).
It is possible to show your notification instead the default. Try this:
$(window).on('beforeunload', function() {
return 'Do you really want to close this window? Some your text...';
});
But it's true, you can't limit user's actions with browser's window.
Technically its not possible to override the default UI.
There are two kind of page leave events can occur.
One is to navigate within the same website by clicking the links. For this kind of page unload, you could be able to write the onclick for all the menu links to show the warning message as you wish with the UI styles. But when you click links, you MUST stop the call for the beforeunload event.
The second one is to navigate outside the website using the browser buttons/address bars. Here you can't override the default UI.
The best example is Facebook. When you type the status and before submit, if you try to navigate within FB, you'll be getting a nice UI warning message. But when you close the window, you'll get the default one.
Hope this helps.

Confirm dialog box on unload/exit UNLESS the back button is pressed?

I have some simple code to display a confirm dialog box when the user tries to leave my form:
window.onbeforeunload = askConfirm;
function askConfirm(){
return "Your answers will be lost.";
}
But this is a multi-page form and they frequently press back to change some values on a previous page.
But when they do this dialog box still comes up.
Is there a way around this?
The answer I would suggest unfortunately doesn't actually answer your question but is a solution of a kind. The only possible solution here, imv, is to make sure that a user clicking the back button doesn't actually create an issue by storing the form answers from all pages. In the case of PHP I would store them in a session ($_SESSION). You have to recognise that users use the back button more than any other UI element within a browser. If your form truly has to be across a number of pages then you need to make sure the data they have entered is persistent across all these pages. I would actually provide a navigation for this within your own interface. Provide a clear sequential process visually and allow instant navigation through this process where possible.
I don't see a way to specifically detect whether the user pressed "back" or any other browser button. This is outside the site's scope.
Only one solution comes to mind: Show the confirmation dialog only when a global flag has been set to "true".
if (ask_when_exiting == true)
return "Your answers will be lost.";
You would have to set the variable to true? in the onclick event of every link that you want the confirmation to pop up for. You should be able to mass apply this event to every link on your page using JQuery or another JS framework (Seomthing like $$('a').each()....).
However, this will disable the confirmation for reloading the page, or any other event that is not triggered using a control on the page like typing in another URL or closing the browser, as well.

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources