Generate a popup with dynamic content using jQuery and JavaScript

Using this code, you can open a JavaScript popup window by clicking an element on the page.

We have included comments in the code to explain how everything works. If you have and issues with this code, or would like some help implementing it into your project, let us know in the comments.

The code below should be placed within

$(document).ready(function(){ 


// When element .element clicked
$('.element').click(function(e){
	// Set the content in a variable
	// This can be dynamically generated from elements on the page
	// E.g. var content = $('#textarea').val(); - This will grab the value of a form element with the ID #textarea
	// OR var content = $('#div').html(); - Will get the content from a div with the ID #div
	
	// Satic text content for this example
	var content = '<div class="popup-content">This is some amazing content!</div>';
	
	// Call the function to open the popup with the content from var = content
	openPopup(content);
});
// Function to open the popup
function openPopup(content){ 
	winpops = window.open(
		// Setup - URL,name,specs,replace
		'',
		'Popup Name',
		'fullscreen=no, toolbar=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, directories=yes, location=yes, width=500, height=400, left=100, top=100, screenX=100, screenY=100');
	
	// Write the content to the popup
	winpops.document.write('<div id="content">'+content+'</div>');
} 

Free Graphics, Icons, Tutorials
Free Graphics Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector GraphicsFree Music Controls Vector Icon Pack
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358