Create jQuery Pop-Ups
Use jQuery Code for Pop-up Windows
If have to quickly scramble to display a pop-up for a single link then feel free to use the pop-up window generator.
However, it would be better to use jQuery to easily integrate pop-up behavior for any link you choose. By using this jQuery code you can add this pop-up functionality to your website in a very maintainable and easy to use way.
Note: this code is just for jQuery driven popup windows not modal overlay windows.
The Benefits of using jQuery for Popup Windows
- You never have to paste javascript into html links - all you have to do is add a class to turn the link into a popup window link.
- You can define multiple classes easily in the javascript so that just by changing the class name you can display the right pop-up sizes for your website.
- There's no javascript in the href html so updating your site or removing the popup functionality is a breeze if you have to make changes in the future.
jQuery Popup Code Instructions
The jQuery code is set-up for 3 different size pop-ups but you can add more types of popups or change the sizes for existing ones easily. Follow the three steps below to add jQuery popups to your website. At the bottom of the page is a link to an example page so that you can view the working code.
Step 1: Add one of the these css classes to any link to turn it into a pop-up link.
Add any of these CSS classes (popup1, popup2, popup3) to your html link. See the example below:
Step 2: (OPTIONAL) Add a link to jQuery in the head of your document.
If you don't use jQuery already, you can add it your site in the HTML head like the line below.
Step 3: Add this jQuery code to your page or to an external javascript file
Click on the jQuery code to select it and then CTRL+C copy it to your clipboard.
This code must come after the jQuery line on your page.
<script type="text/javascript"> //initialize the 3 popup css class names - create more if needed var matchClass=['popup1','popup2','popup3']; //Set your 3 basic sizes and other options for the class names above - create more if needed var popup1 = 'width=400,height=300,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20'; var popup2 = 'width=800,height=600,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20'; var popup3 = 'width=1000,height=750,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20'; //The pop-up function function tfpop(){ var x = 0; var popClass; //Cycle through the class names while(x < matchClass.length){ popClass = "'."+matchClass[x]+"'"; //Attach the clicks to the popup classes $(eval(popClass)).click(function() { //Get the destination URL and the class popup specs var popurl = $(this).attr('href'); var popupSpecs = $(this).attr('class'); //Create a "unique" name for the window using a random number var popupName = Math.floor(Math.random()*10000001); //Opens the pop-up window according to the specified specs newwindow=window.open(popurl,popupName,eval(popupSpecs)); return false; }); x++; } } //Wait until the page loads to call the function $(function() { tfpop(); }); </script>
That's about it - it's pretty easy to get it up and running. Change the popup specifications if you have more than 3 popup variations that need to be displayed on your site. You can also change the class names if you prefer a different naming system.
JQuery Popup Window Examples
You can check out the jQuery code in action on this page: jQuery Pop-up Window Examples. Everything is on the page so you can view source to check it out.
This jQuery driven popup system should work well for the vast majority of sites - I think even if you have tons of popup size variations on your site, it's a lot more maintainable to have the pop-ups controlled by a single piece of jQuery code than to have snippets of javascript scattered on links throughout your site.
Most Popular Text Tools
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Alphabetical Order: Alphabetize all sorts of text content with this tool.
- Text to HTML: Automatically change plain text into HTML paragraphs.
- HTML to Text: Remove all HTML tags, leaving only text content.
- Word to HTML: Convert a Word document into clean HTML code.
- Online Sentence Counter: Quickly count the number of sentences in your content.
- Random Choice Generator: Randomly pick a choice from a list of options.
- Reverse Text Generator: Create social media posts or any text in reverse text.
- Remove Duplicate Lines: Remove all of the identical lines in your content.
- Paragraph to Single Line: Convert any multiple paragraphs to a single line.
Alphabetical Tools
Random Generators
- Random Word Generator
- Random Sentence Generator
- Random Noun Generator
- Random Adjectives Generator
- Random String Generator
- Random Letter Generator
- Random Decision Maker
- Random Number Generator
- Random Password Generator
- Random Choice Generator
Line Break Tools
Fun Text Tools
- Reverse Text
- Fake Word Generator
- Repeat Text Generator
- Tiny Text Generator
- Cursive Text Generator
- Bold Text Generator
Text Changing Tools
- Find and Replace Online
- Capitalize the First letter of Sentences
- Uppercase or Lowercase Text
- Remove Spaces Online
- Replace Tabs with Spaces
- Capitalize Each Word
- Remove Numbers from Text
SEO and Word Tools
- Word Counter
- Sentence Counter Online
- Character Counter
- Title Capitalization Tool
- Meta Description Length Checker
Content Conversion Tools
- Convert a Word Doc to HTML
- Convert Word Doc to Text
- Convert Plain Text to HTML
- Convert Email to HTML
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML to Text
HTML Code Generators
- HTML Table Generator
- HTML List Generator
- HTML Text Generator
- Javascript Pop-up Window Maker
- Mailto Link Generator
- Remove HTML Tags