3 Popup Overlay Demos Using jQuery appendTo

Estimated reading time: 6 minutes

 

 

 

Download Guideline

• Prepare HTTP server such as XAMPP or WAMP in your windows environment.
• Download and unzip into a folder that http server can access.

 DOWNLOAD SOURCE

 

 

HTML Overlay Basics

The <div> tags are the most likely elements to implement overlay effects. By setting the CSS attribute position: to be absolute or relative, popup layers can even be multiple.

One of our previous articles had talked about CSS setting for popup DIV’s. Next, we are going to apply jQuery core API .appendTo() to produce the overlay effect by popup boxes. Those are dialog boxes on which operations are allowed to get back user responses.

 

jQuery Mobile for Responsive

There is a project or extension of jQuery, called jQuery Mobile and designed with highly responsive to fit smartphones and tablets.

Except jQuery API, we leverage jQuery Mobile to get profit of RWD and integration. It is necessary to download a CSS file and two Javascript files. Linking to CDN is also available. Remind that jQuery 3.x is not compatible with jQuery Mobile 1.4.5, so we choose the newest of jQuery 2.x.

• http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css
• https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
• http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js

 

jQuery Mobile Grid Layout & Button

jQuery Mobile offers CSS Framework for common user interface elements. We use Grid CSS Layout here. For example, <div class="ui-grid-a ui-responsive"> gives a two-column responsive grid. There are 4 preset layouts of even-divided column width:

• two-column (using the ui-grid-a class)
• three-column (using the ui-grid-b class)
• four-column (using the ui-grid-c class)
• five-column (using the ui-grid-d class)

Moreover, we use Button Classes of CSS Framework in these examples. You can decorate the buttons with icons by using class="ui-btn-icon-left ui-icon-edit" to put icons on the left, for example as below. Note that the responsive buttons are blue-highlighted if clicked.

 

 

jQuery Mobile Popup

Dialog UI boxes are classified as below for different purposes. You can put each of them into Block B <div class="ui-block-b"> according to users’ choice.

• Prompt: A notice box just asking for confirmation.



• Yes/No: A decision form for users to move to yes or no.



• Fill Data:: A text field to write opinions or something for submission.

<div role="main" class="ui-content">
    <div class="ui-grid-a ui-responsive">
        <div class="ui-block-a">
            <!-- Buttons for each demo -->
            <a sel="prompt" href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back btn-1">Prompt</a><br>
            <a sel="yes-no" href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check btn-1">Yes No</a><br>
            <a sel="fill-data" href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit btn-1">Fill Data</a>
        </div>
        <div class="ui-block-b">
            <!-- Dynamic Popup from Library by jQuery -->
        </div>
    </div>
    <div class="ui-grid-solo">
        <div class="ui-block-a msg-bar"><label></div>
    </div>
</div>

 

jQuery .appendTo()

First, just like a library, we store 3 hidden <div> elements anywhere in HTML files. jQuery can append each of popup forms in library into <div class="ui-block-b"> for overlay effect, where ui-block-b belongs to the CSS Framework of jQuery Mobile.

<!-- Popup Overlay Library -->
<!-- Demo 1 -->
<div id="prompt" class="overlay ui-corner-all">
    <h1>Welcome to join us !</h1><br><br><br>
    <a sel="OK" href="#" class="ui-btn ui-shadow ui-corner-all btn-2">OK</a>
</div>
<!-- Demo 2 -->
<div id="yes-no" class="overlay ui-corner-all">
    <h1>Do you want coffee ?</h1><br><br><br>
    <a sel="Yes" href="#" class="ui-btn ui-shadow ui-corner-all btn-3">Yes</a>
    <a sel="No" href="#" class="ui-btn ui-shadow ui-corner-all btn-3">No</a>
</div>
<!-- Demo 3 -->
<div id="fill-data" class="overlay ui-corner-all">
    <div>Fill Text ...</div>
    <a sel="submit" href="#" class="ui-btn ui-shadow ui-corner-all">Submit</a>
    <textarea id="text-area"></textarea>
</div>

In the CSS file, the lower layer <div class="ui-block-b"> should be position:relative, while the upper layer <div class="overlay"> should be position:absolute.

.ui-block-b { width:70%!important; height:350px; position:relative; }
.overlay {display:none; height:70%; width:60%; padding:2%; position:absolute; }

Each of <div class="overlay"> tags has an unique id. If chosen by buttons, append the selected <div> to the lower layer <div class="ui-block-b"> by using .appendTo($(".ui-block-b")), and then make it visible by using .toggle().

$(".btn-1").on("click", function () {
    ele = "div#"+$(this).attr("sel");
    $(ele)
    .appendTo($(".ui-block-b"))
    .toggle();
});

 

Popup Form Down

Once users respond to dialog boxes, jQuery get response value by btnval = $(this).attr("sel"), and then show it on message bar by $(".msg-bar label").text(btnval). Finally, popup overlay forms vanish by using jQuery $(this).parent().hide().

$(".overlay a").on("click", function () {
    btnval = $(this).attr("sel");
    if(btnval == "submit") btnval = $("#text-area").val();
    $(".msg-bar label").text(btnval);
    $(this).parent().hide();
});

 

 

Learning Tips

Let us suggest a excellent way to learn HTML scripts here. Using Google Chrome F12 Inspect or Inspect Element will help you study the codes.

In Google Chrome, there are two ways to inspect a web page using the browser built-in Chrome DevTools:

• Right-click an element on the page or in a blank area, then select Inspect.
• Go to the Chrome menu, then select More Tools > Developer Tools.

 

Suggested Reading

• Html DIV Popup Form by using CSS Position Overlay
• jQuery Toggle Div and Table Row/Column in 5 Demos

 

 

Try It Yourself

Click here to execute the source code, thus before studying the downloaded codes, you can check whether it is worthy.