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>');
} 

Related Posts from JavaScript, jQuery, Tutorials

WordPress: Display Permalinks in Posts Using Shortcode

jQuery Menu Hover Intent Effect

WordPress: Add A Confirm Password Field on WooCommerce Version 3+ Checkout Page

HTML5/Javascript Scratchcard Script