Rich-text Reply

Create Pop Up Using jQuery Code

edesantiago 02-09-15

Create Pop Up Using jQuery Code

Hey Guys -

 

Does anyone know how to create a simple pop-up using JQuery code?

 

Thanks,

Evette

Brian_Abad 02-09-15
 

Re: Create Pop Up Using jQuery Code

Thanks for your question!

 

This website may be a useful tool to generate the code needed to create a pop-up: http://www.textfixer.com/html/javascript-pop-up-window.php.

 

Let's say for example the code that is generate is for optimizely.com and it provides the following:

 

<a href="http://optimizely.com" onclick="javascript&colon;void window.open('http://optimizely.com','1423518927253','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;">Pop-up Window</a>

 

We can take what's located inside of the onclick attribute and set that as an attribute to the element in which we want to generate the pop-up after clicking. For instance, let's say we want to generate this pop up of optimizely.com after clicking on a paragraph element. Using jQuery, this would look like:

 

$("p").attr("onclick", "javascript&colon;void window.open('http://optimizely.com','1423518927253','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;")

 

I hope this helps!

---
Brian Abad
Manager, Technical Support
Customer Success
Optimizely

Re: Create Pop Up Using jQuery Code

Just build the HTML content of the popup as a string using JavaScript, and then append/prepend this to some element on your page. Add some methods to show/hide the popup, and then call them respectively. For example: http://screencast.com/t/DWtjDdvW

This could easily be done with vanilla JS as well. I often will build things out like this in Codepen first ( http://codepen.io/ ) and then I'll paste the HTML into a tool like the following in order to generate a JavaScript string variable containing this markup: http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

(I suggest checking the option here "Build up a string variable that you can use later" over the other two options that offer the usage of document.write, which should never ever be used)
-- Sean
UI Developer @ Blue Acorn

optimizely developer certification