Pop Up Form With Close Functionality - javascript

I realise that to most this is perhaps a very simple query, but I'm relatively new to working with the design elements of an HTML form, so please bear with me.
I'm using this form to allow the user to upload image files.
What I'd like to be able to do, is change the form to a pop window that appears in the centre of the page, but after reading many tutorials, I must admit to being non the wiser. I just wondered whether someone could perhaps please show me what I'd need to do to create this.
I'd also wondered whether it would be possible if someone could perhaps help me out a little please on the 'close form' function. I've added the 'close' functionality to my form, but it appears as a hyperlink, with a 'Warning Message' dialog box appearing upon selection. I'd like, if possible, for this to appear as normal text and without the 'Warning message'.
Any help would truly be appreciated.
Many thanks and Kind regards

I would recommend looking into a jquery lightbox type solution. Using javascript the way you are the warnings and possible blocking of your popup could occur. Here is a simple window.open article that will get your window opened
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Here is an article to close the window without getting a prompt:
How can I close a browser window without receiving the "Do you want to close this window" prompt?enter link description here

I would recomment JQuery Dialogue. It's easy to implement even for a novice JQuery/Javascript developer

Related

How do I open a link to a website on a new window in a browser and block the current website until the user finish or close the new one?

Currently I'm working with Mercado Pago API, but the thing is that I want when the user clicks the pay button, I want to open a new window in the browser (chrome, firefox, etc.) in the middle of the screen where is going to fill his credit card number and all that stuff meanwhile i want that the background site (I mean the main site where the user clicked on pay) to be blocked, like with darker colors, and not be able to do anything in that site until the user close the new window or he finish with the payment. I've been looking on the internet but I haven't found anything related to the blocked site. Maybe you could help me or have any idea to make that. thanks in advance.
I can't make comments, so sorry in advance for this being an "answer". But are you not able to store information about what the user has selected and then use the current page to process the payment, then bring back or send off what they wanted? perhaps using AJAX to run a PHP page that stores something. Just a suggestion but not entirely an answer, because AFAIK you can't "block" tabs as that could be very dangerous and could be used for the wrong reasons.
The task you want to do requires both back-end programming (php/server-side) and a bit of front-end jquery(js) + ajax.
For front-end something like this could be your start.
Bootstrap Static Modal Example.
And you would need to put your form there, submit it via ajax, and on success close the modal.
I hope this could help you a bit, and get you started in the right direction.
Note: This is not particularly safe. (It's not hard to hide the modal and fiddle around the page in the background.

Feedback survey modal on window close event after 10 exits, irrespective of same or different user

I am a newbie to it, so please bear with me.
I am looking to set up a feedback survey in Survey Monkey but would like a pop up box (modal) to appear when users exit the website.
Ideal requirements:
Ideally I’d like the pop up box to appear for approx. 1 in every 10 visits to the site. (either close or refresh window tab), using javascript / jquery.
Seeking for expert advice.
Many thanks
I think what you're looking for is a popup website collector. Either the Popup Invitation or Popup Survey type. Just choose the Website collector type when creating a new collector for a survey.
Looking at the help page and the options it doesn't seem to have the options to set how often the popup shows up. You may be able to modify the embed code to set when and how often it pops up but I'm unsure about that.
You can give it a go or contact SurveyMonkey support if you're having trouble.
just to give an update, we used the reference link: http://beeker.io/exit-intent-popup-script-tutorial
to implement as per our requirements, by setting cookies for each user instead of users count. Hope this will help to someone. Thanks

creating a pop-up(or is it a pop-over?) window for a webpage

I do apologize for the title if it is inaccurate. (feel free to offer me suggestions on the proper wording if needed.)
My question is for my web page, I would like to do something where you click on a link (or image), and instead of opening a new tab or browser window, you get a box that hovers over your page displaying the image of the link (or smaller image you clicked on). I am not sure if the correct term for this is a pop-up or pop-over window.
The best example of what I would like to do, is if you were to go to amazon.com and you see a product and it says "click here for a larger image". when you do that, a sort of window will display itself over the current page and show you the larger image.
Would anyone be able to give an example of code to see how this would be done as well? I am very thankful for any and all recommendations.
You could use a solution like fancybox, I believe this is what are you looking for http://fancybox.net
If I've understood what you mean, there are tons of jquery plugins to do that, for example http://lokeshdhakar.com/projects/lightbox2/
Here is a link, he has an explanation and code snippets for ya, works great.
http://www.htmlgoodies.com/beyond/javascript/article.php/3881276

Javascript How To : hide the browser popup for onBeforeUnload and display custom popup

I am building a MMO which has a tutorial in it.
When the user tries to navigate away from the tutorial or close the tab/browser while on the tutorial, I need to show a custom popup which has a options as to why the person is quitting the tutorial.
I am familiar with the onbeforeunload event but my requirement is to display the custom popup instead of the browser default popup as it can't be customized other than changing the text message.
Is there any way I can hide the browser popup and show my custom popup instead.
I'd really suggest you use jQuery UI for this. It'll make your life much easier and has modal dialogs built into the API. See here: http://jqueryui.com/dialog/#modal
OK, what I said before was totally wrong. Must have been tired.
You can't override the onbeforeunload because of the way it fires in the DOM. This is a good SO explaining it.
How can I override the OnBeforeUnload dialog and replace it with my own?

require javascript confirmation like alert()

Is there anyway to create an alert box, but with a more modern style? When an alert box is issued, the user can not use the browser until it is acknowledged (enter key or click OK). I would like to lock the browser in the same fashion, however use a custom made, better looking alert box. Is this possible with javascript?
Thanks
Edit: To clarify, by lock the browser I mean unable to change url, open new tab etc. The user needs to confirm before they can switch to another page
Yes. The kind of dialog you're referring to is a modal dialog. The basic principle of implementation is to simply cover the rest of the elements on the page with another element to render them unclickable.
Simply googling "javascript modal dialog" reveals a wealth of information; I could not hope to provide a comprehensive explanation in this small space.
[edited -Nickolay] Such dialog won't block further JavaScript execution as alert() does though, and it won't prevent the user from accessing the rest of the browser (other tabs and the Location bar). It's a good thing the user can continue to use the browser and it's one of the reasons such page-modal dialogs were created.
Yes, they are called "modal dialogs". JQuery has an excellent dialog widget that can be made modal as part of its JQueryUI library that can host just about any type of content, including forms.
See this one
Dialog
using jQuery
or
jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)
Edit
To your edit: I don't think by using javascript you can prevent the user from typing it to the url bar or opening a new tab. And do avoid doing these sort of things that make a user hinder his normal action.
No, I don't think modal dialogs solves his question.(Not that I have a solution for this, but just to express my opinion). When you use modal dialogs, the only controls you can't access are those inside the web page but the controls of the browser can very well be accessed (ie. Menus, address bar);
This is not possible in javascript. You may use facebox-like containers, that simulates modal behavior, but there are not native modal, i.e. javascript code will not stop execution, when "modal window" is appear.

Categories

Resources