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

Posted by at
Labels: , ,

1 comment:

  1. erectileNovember 26, 2020 at 1:32 AM

    Hey there terrific blog! Does running a blog like this require a great deal of work? I have very little knowledge of coding but I was hoping to start my own blog soon. Anyways, should you have any recommendations or techniques for new blog owners please share. I understand this is off subject however I just wanted to ask. Thanks a lot!

    ReplyDelete

Subscribe to: Post Comments (Atom)