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?




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:


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


<a href="" onclick="javascript&colon;void'','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 after clicking on a paragraph element. Using jQuery, this would look like:


$("p").attr("onclick", "javascript&colon;void'','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

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:

This could easily be done with vanilla JS as well. I often will build things out like this in Codepen first ( ) and then I'll paste the HTML into a tool like the following in order to generate a JavaScript string variable containing this markup:

(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