Plugin for pop-up blocks/forms for the JQUERY/AJAX

An attribute of every modern website, service or portal is dynamic pop-up forms with additional content or actions on the page. In this article we will look at our own work on a universal solution to the problem of pop-up forms with any content using jQuery and AJAX.

The plugin can be connected to any page of the site. Using the dynamic content loading plugin, you can easily implement the tasks of pop-up forms, loading any dynamic content in any form convenient for you.

Download the plugin

Distinctive features and capabilities of the universal pop-up block plugin:

• Dynamic loading of additional content or pop-up forms
• Many templates for dynamic loading of content
• Plugin operation without reloading - AJAX
• Key lock to avoid multiple presses
• Unique styling of any content

The universal pop-up block plugin consists of the main parts:

• HTML markup with the required class mask
• JQuery script for dynamically loading content
• Downloadable Content Templates
• CSS styles for loading content

Installing an example plugin on the web server host

After downloading and unpacking the plugin, we will see the following tree of files and directories:

/css/style.css              // Main stylesheet file
/css/font-awesome.css       // FontAwesome style file
/fonts/*                    // Font files
/js/script.js               // jQuery script for dynamic loading
/images/exit.png            // Image for the block close button
/framework/*                // Directory of content-loading template files
index.html                  // Plugin usage example

Next, we need to place the archive files on any web server. The script does not work in the mode of viewing local files in the browser. Upload all the contents to any folder on the web server host and open the link through the browser address bar:

http(https)://domen.domen/path/to/dir/index.html

If we open a presentation page with a description and two buttons, everything is done correctly.

Next we experiment with the "FORM" and "TEXT" buttons.

Installation and integration of pop-up forms plugin on the website

To install the plugin on an existing site you need:

1. Copy the following list of files and directories:

/js/script.js               // jQuery script for dynamic loading
/images/exit.png            // Image for the block close button
/framework/*                // Directory of content-loading template files

2. Copy or create your own styling of dynamic loading elements using the following example:

.float-box_inset {
  position: relative;
  width: 820px;
  height: 350px;
  padding: 27px;
  background: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  outline: 13px solid rgba(115, 7, 50, 0.6);
  margin: 20px auto;
  font-size: 16px;
  color: black;
  margin-top: 117px;
}

.float-box_inset a {
  color: #5a7f80;
}

.float-box {
  position: fixed;
  z-index: 1000;
  top: -21px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9000;
}

.float-box .exit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: url("/images/exit.png") no-repeat scroll center top transparent;
}

.float-box .exit:hover {
    background-position: center bottom;
}

3. Create new or edit existing markup using the following example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

<a href="#" class="load--form">FORM</a>

For the plugin to work, buttons, links or other HTML markup elements must be assigned a class value using the mask load--loader_template_name

4. The results will include jQuery processing of pressing an element with a matching class mask that generates an AJAX request.

The result of the script should add a "section" tag with the class "float-box" to the end of the root child elements of the "body" tag. If something is not working correctly for you, refer to the example attached as an archive to this article.

How the universal pop-up form plugin works

The universal pop-up form plugin works according to the following principle:

1. The click event is triggered on elements that have a class corresponding to the mask load--loading_template_name
2. The plugin blocks repeated clicking of a triggered element
3. The event generates a GET request using AJAX and jQuery via the link /framework/upload_template_name.php
4. In case of a successful response to a GET request, the plugin adds the markup of the loaded content to the end of the child elements of the "body" tag
5. Regardless of the outcome of the GET request, upon completion of the AJAX function, the script unlocks the button.