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
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.
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.
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.
The Most Popular Tools
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Random Sentence Generator: Create random sentences for creative brainstorming.
- Random Number Generator: Generate some random numbers in a specific number range.
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Choice Generator: Let this tool make a random decision for you.
- Reverse Text Generator: create social media posts or text messages in reverse or mirrored text
- Convert Word to HTML: Automatically convert word contents to HTML code.
- Text to HTML: Quickly change plain text into HTML paragraphs.
- HTML to Text: Remove HTML tags, leaving only text content.
- Alphabetical Order: Alphabetize lists, or other text content with this tool.
- Random Decision Maker: Generate a random decision with this app.
- Capitalize the First letter of Sentences
- HTML Table Generator: Generate the code for a simple HTML table.
- Word Counter: Count the number of words in your text.
- Remove Duplicate Lines: Remove duplicate lines from a text file.
- HTML Compression: Compress HTML contents into a smaller size.
The Newest Tools by Category
Text Fixing Tools
- Remove Line Breaks
- Add Line Breaks Online
- Remove Duplicate Lines
- Paragraph to Single Line
- Remove Extra Whitespaces
- Uppercase or Lowercase Text
- Unscramble Letters to Make Words
HTML Coding Tools
- Remove HTML Tags from a String
- HTML Text Generator
- HTML List Generator
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML Character Encoding Tool
Word & Language Tools
- Word Counter
- Title Capitalization Tool
- Page Title and Description Letter Counter
- List of Common Words
- Plural Noun Generator
- Random Nouns Generator
- Random Letter Generator