Code Samples: popup

Showing posts with label popup. Show all posts

Monday, May 7, 2018

JQuery Custom Popup Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Popup</title>
    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="custom-popup.js?v=<?= time() ?>"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            console.log(CustomPopup.getAvailableOptions());
            var body = $(document.body), html = body.find(".move-container").clone(true);
            // to get or check initial config of CustomPopup just console log below
            // CustomPopup.getAvailableOptions()
            // and all available events shown in "triggers" array
            // so what you need to do popup.trigger("close") to close popup
            body.find(".open-popup-html").click(function() {
                CustomPopup.fromHTML($("<div>Are you sure want to delete?</div>"));
            });
            body.find(".open-popup-url").click(function() {
                CustomPopup.fromURL("popup.php", {id: 0}, {
                    // you also can set all below function and variables
                    // as html data attribute
                    onOpen: function(p) {
                        console.log("POPUP OPENED");

                        // disabling popup
                        p.trigger("disable");

                        setTimeout(function() {
                            // enabling popup
                            p.trigger("enable");
                        }, 2000);
                    },
                    onClose: function(p) {
                        console.log("POPUP CLOSED");
                    },
                    onSubmit: function(p) {
                        p.trigger("show-loading");
                        console.log("POPUP SUBMITTED");
                        // return false will not close popup immediately
                        // you have to close manually by popup.trigger("close")
                        setTimeout(function() {
                            p.trigger("close-loading");
                            setTimeout(function() {
                                p.trigger("close");
                            }, 2000);
                        }, 2000);
                        return false;
                    },
                    popupTitle: "POPUP TITLE",
                    yesText: "YES TEXT",
                    noText: "NO TEXT",
                    showTitle: true,
                    showClose: true,
                    popupClass: "some-class",
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('X-Test-Header1.1', 'test-value1');
                        xhr.setRequestHeader('X-Test-Header2.1', 'test-value2');
                    },
                    xhrFail: function(jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            });
        });
        function formSubmitted() {
            alert("POPUP SUBMITTED");
        }
    </script>
</head>
<body>
<button class="open-popup-html">Open popup from HTML</button><br/>
<button class="open-popup-url">Open popup from URL</button><br/>
<button
    type="button" data-popup-url="popup.php"
    class="my-popup-opener" data-popup-class=""
    data-yes-text="Save" data-on-submit="formSubmitted"
    data-popup-title="MY POPUP" data-on-open="formOpened"
    data-no-text="Close" data-show-title="1">
    Open Popup On Click Html Element (.my-popup-opener)
</button>
</body>
</html>





On popup submit there will be an overlay shown above.


You can download full source code from here

Thursday, May 18, 2017

jQuery UI Popup Dialog Simple Example

Its fairly easy to implement jQuery popup dialog. You just need to include jQuery UI JS and CSS in your project and need to call the method as follows:

.dialog() with additional options as you want.

$("#dialog-form").dialog({
    title: "Dialog Title",
    width: 500,
    height: 400,
    autoOpen: false,
    modal: true,
    buttons: {
        "Ok": function() {
            $('#buttonExecute').val("Show Dialog - Yes");
            $(this).dialog("close");
        },
        "Cancel": function() {
            $('#buttonExecute').val("Show Dialog - No");
            $(this).dialog("close");
        }
    },
    close: function( event, ui ) {
        console.log(event);
        console.log(ui);
    },
    open: function( event, ui ) {
        $('#buttonExecute').val("Show Dialog - Open");
    }
});

$('#buttonExecute').click(function() {
    $("#dialog-form").dialog("open");
});

Which will show dialog as below screenshot:

You can download full example from below link:

Click here to download.

Friday, June 28, 2013

Window open() popup Method

Parent window


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<span id="popup"> Click to Open Popup </span>

<script type="text/javascript">
var ar=new Array("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6",
                 "Item 7", "Item 8", "Item 9", "Item 10");
function getArray(){
    return ar;
}
function changeHere(value) {
    console.log(value);
    $("span#popup").append("<div>"+value+"</div>");
}
$(document).ready(function(){
    $("span#popup").click(function(){
        var p=window.open("wind2.php", 'popUpWindow','height=400, width=650, left=300, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes');
    });
});


</script>

Child window


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list"></ul>
<script type="text/javascript">
    jQuery(document).ready(function() {
        if(window.opener && !window.opener.closed) {
            alert("LOADED");
        }
        if(window.opener && !window.opener.closed){
            var ar= window.opener.getArray();
            var items="";
            for(var i=0;i<ar.length;i++){
                    items +="<li>" + ar[i] + "</li>";
            }
            $("ul#list").html(items);
            window.opener.changeHere("From child window.");
        } else {
            alert("No window opener");
            window.location.href = 'wind.php';
        }
        //window.close();
    });
</script>
<?phpecho "<pre>";print_r($_REQUEST);
echo "</pre>";?>

Parameter

Description

URL

Optional. Specifies the URL of the page to open. If no URL is specified, a new window with about:blank is opened

name

Optional. Specifies the target attribute or the name of the window. The following values are supported:

_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window

specs

Optional. A comma-separated list of items. The following values are supported:

channelmode=yes\|no\|1\|0	Whether or not to display the window in theater mode. Default is no. IE only
directories=yes\|no\|1\|0	Whether or not to add directory buttons. Default is yes. IE only
fullscreen=yes\|no\|1\|0	Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only
height=pixels	The height of the window. Min. value is 100
left=pixels	The left position of the window
location=yes\|no\|1\|0	Whether or not to display the address field. Default is yes
menubar=yes\|no\|1\|0	Whether or not to display the menu bar. Default is yes
resizable=yes\|no\|1\|0	Whether or not the window is resizable. Default is yes
scrollbars=yes\|no\|1\|0	Whether or not to display scroll bars. Default is yes
status=yes\|no\|1\|0	Whether or not to add a status bar. Default is yes
titlebar=yes\|no\|1\|0	Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box. Default is yes
toolbar=yes\|no\|1\|0	Whether or not to display the browser toolbar. Default is yes
top=pixels	The top position of the window. IE only
width=pixels	The width of the window. Min. value is 100

replace

Optional.Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:

true - URL replaces the current document in the history list
false - URL creates a new entry in the history list

Pages