{"id":356,"date":"2014-12-02T15:17:32","date_gmt":"2014-12-02T15:17:32","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=356"},"modified":"2016-04-27T17:53:08","modified_gmt":"2016-04-27T17:53:08","slug":"alert-dialog-box-using-jquery-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/","title":{"rendered":"Alert Dialog Box using jQuery and CSS"},"content":{"rendered":"

The alert window is very common and useful things for every web projects. We use the alert dialog box for display messages in the browser. All browsers have their default alert window style. Many times we need a custom alert dialog box for matching with our project theme. This tutorial helps you to create the custom alert popup.
\nWe have been developed two scripts for customizing the alert dialog. One is JavaScript script named cwdialog.js<\/code> and another is CSS script named cwdialog.css<\/code>. You can change the alert dialog box style with the use of cwdialog.css<\/code> file. In this tutorial we will discuss, how can you use this two scripts and customize alert message box. To complete the whole system we have used jQuery, CSS, and HTML. It is very simple and easy to use.<\/p>\n

If you wish to view the demo, you can view the live demo from the above “Demo” link. Also, you can download the full scripts from the above “Download” link.<\/p>\n

At first you need to include jQuery library file:<\/h2>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"jquery.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
Include the cwdialog.js<\/code> and cwdialog.css<\/code> file into the  HTML page:<\/h2>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"cwdialog.js\"<\/span>><\/script<\/span>>\r\n<link<\/span> type<\/span>=\"text\/css\"<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"cwdialog.css\"<\/span>\/>\r\n<\/pre>\n
Button HTML:<\/h2>\n
 Just add HTML button tag and onClick<\/code> element. You only need to call the CWdialog()<\/code> function to use the custom dialog box. Pass the alert box message into this function.<\/p>\n
<button<\/span> onClick<\/span>=\"CWdialog('This is a notify dialog box, created by CodexWorld.');\"<\/span>>Click here<\/button<\/span>>\r\n<\/pre>\n
cwdialog.js<\/code> File:<\/h2>\n
 This file contains the following JavaScript codes.<\/p>\n
\/\/ Global CWdialog variables<\/span>\r\nvar<\/span> $<\/span>CWdialog =<\/span> null<\/span>,\r\n    $<\/span>overlay =<\/span> null<\/span>,\r\n    $<\/span>body =<\/span> null<\/span>,\r\n    $<\/span>window<\/span> =<\/span> null<\/span>,\r\n    $<\/span>cA =<\/span> null<\/span>,\r\n    CWdialogQueue =<\/span> [];\r\n\r\n\/\/ Add overlay and set opacity for cross-browser compatibility<\/span>\r\n$<\/span>(function<\/span>() {\r\n    \r\n    $<\/span>CWdialog =<\/span> $<\/span>('<div class=\"cwdialog\">'<\/span>);\r\n    $<\/span>overlay =<\/span> $<\/span>('<div class=\"cwdialog-overlay\">'<\/span>);\r\n    $<\/span>body =<\/span> $<\/span>('body'<\/span>);\r\n    $<\/span>window<\/span> =<\/span> $<\/span>(window<\/span>);\r\n    \r\n    $<\/span>body.append( $<\/span>overlay.css('opacity'<\/span>, '.94'<\/span>) ).append($<\/span>CWdialog);\r\n});\r\n\r\nfunction<\/span> CWdialog<\/span>(text, options) {\r\n    \r\n    \/\/ Restrict blank modals<\/span>\r\n    if<\/span>(text===<\/span>undefined<\/span> ||<\/span> !<\/span>text) {\r\n        return<\/span> false<\/span>;\r\n    }\r\n    \r\n    \/\/ Necessary variables<\/span>\r\n    var<\/span> $<\/span>me =<\/span> this<\/span>,\r\n            $<\/span>_inner =<\/span> $<\/span>('<div<\/span> class<\/span>=\"cwdialog-inner\"<\/span>>'),\r\n            $<\/span>_buttons =<\/span> $<\/span>('<div<\/span> class<\/span>=\"cwdialog-buttons\"<\/span>>'),\r\n            $<\/span>_input =<\/span> $<\/span>('<input<\/span> type<\/span>=\"text\"<\/span>>');\r\n    \r\n    \/\/ Default settings (edit these to your liking)<\/span>\r\n    var<\/span> settings =<\/span> {\r\n    \r\n        animation: 700<\/span>, \/\/ Animation speed<\/span>\r\n        buttons: {\r\n            confirm: {\r\n                action<\/span>: function<\/span>() { $<\/span>me.dissapear(); }, \/\/ Callback function<\/span>\r\n                className: null<\/span>, \/\/ Custom class name(s)<\/span>\r\n                id: 'confirm'<\/span>, \/\/ Element ID<\/span>\r\n                text: 'Ok'<\/span> \/\/ Button text<\/span>\r\n            }\r\n        },\r\n        input: false<\/span>, \/\/ input dialog<\/span>\r\n        override: true<\/span> \/\/ Override browser navigation while CWdialog is visible<\/span>\r\n    };\r\n    \r\n    \/\/ Merge settings with options<\/span>\r\n    $<\/span>.extend<\/span>(settings, options);\r\n    \r\n    \/\/ Close current CWdialog, exit<\/span>\r\n    if<\/span>(text==<\/span>'close'<\/span>) { \r\n        $<\/span>cA.dissapear();\r\n        return<\/span>;\r\n    }\r\n    \r\n    \/\/ If an CWdialog is already open, push it to the queue<\/span>\r\n    if<\/span>($<\/span>CWdialog.is<\/span>(':visible')) {\r\n\r\n        CWdialogQueue.push<\/span>({text: text, options: settings});\r\n    \r\n        return<\/span>;\r\n    }\r\n    \r\n    \/\/ Width adjusting function<\/span>\r\n    this<\/span>.adjustWidth<\/span> =<\/span> function<\/span>() {\r\n        \r\n        var<\/span> window_width =<\/span> $<\/span>window<\/span>.width<\/span>(), w =<\/span> \"20%\"<\/span>, l =<\/span> \"40%\"<\/span>;\r\n\r\n        if<\/span>(window_width<=<\/span>800<\/span>) {\r\n            w =<\/span> \"90%\"<\/span>, l =<\/span> \"5%\"<\/span>;\r\n        } else<\/span> if<\/span>(window_width <=<\/span> 1400<\/span> &<\/span>&<\/span> window_width ><\/span> 800<\/span>) {\r\n            w =<\/span> \"70%\"<\/span>, l =<\/span> \"15%\"<\/span>;\r\n        } else<\/span> if<\/span>(window_width <=<\/span> 1800<\/span> &<\/span>&<\/span> window_width ><\/span> 1400<\/span>) {\r\n            w =<\/span> \"50%\"<\/span>, l =<\/span> \"25%\"<\/span>;\r\n        } else<\/span> if<\/span>(window_width <=<\/span> 2200<\/span> &<\/span>&<\/span> window_width ><\/span> 1800<\/span>) {\r\n            w =<\/span> \"30%\"<\/span>, l =<\/span> \"35%\"<\/span>;\r\n        }\r\n        \r\n        $<\/span>CWdialog.css<\/span>('width'<\/span>, w).css<\/span>('left'<\/span>, l);\r\n        \r\n    };\r\n    \r\n    \/\/ Close function<\/span>\r\n    this<\/span>.dissapear<\/span> =<\/span> function<\/span>() {\r\n        \r\n        $<\/span>CWdialog.animate<\/span>({\r\n            top: '-100%'<\/span>\r\n        }, settings.animation, function<\/span>() {\r\n            \r\n            $<\/span>overlay.fadeOut<\/span>(300<\/span>);\r\n            $<\/span>CWdialog.hide<\/span>();\r\n            \r\n            \/\/ Unbind window listeners<\/span>\r\n            $<\/span>window<\/span>.unbind<\/span>(\"beforeunload\"<\/span>);\r\n            $<\/span>window<\/span>.unbind<\/span>(\"keydown\"<\/span>);\r\n\r\n            \/\/ If in queue, run it<\/span>\r\n            if<\/span>(CWdialogQueue[0<\/span>]) { \r\n                CWdialog(CWdialogQueue[0<\/span>].text<\/span>, CWdialogQueue[0<\/span>].options<\/span>);\r\n                CWdialogQueue.splice<\/span>(0<\/span>,1<\/span>);\r\n            }\r\n        });\r\n        \r\n        return<\/span>;\r\n    };\r\n    \r\n    \/\/ Keypress function<\/span>\r\n    this<\/span>.keyPress<\/span> =<\/span> function<\/span>() {\r\n        \r\n        $<\/span>window<\/span>.bind<\/span>('keydown'<\/span>, function<\/span>(e) {\r\n            \/\/ Close if the ESC key is pressed<\/span>\r\n            if<\/span>(e.keyCode===<\/span>27<\/span>) {\r\n                \r\n                if<\/span>(settings.buttons.cancel) {\r\n                    \r\n                    $<\/span>(\"#cwdialog-btn-<\/span>\" +<\/span> settings.buttons.cancel.id<\/span>).trigger<\/span>('click'<\/span>);\r\n                } else<\/span> {\r\n                    \r\n                    $<\/span>me.dissapear();\r\n                }\r\n            } else<\/span> if<\/span>(e.keyCode===<\/span>13<\/span>) {\r\n\r\n                if<\/span>(settings.buttons.confirm) {\r\n                    \r\n                    $<\/span>(\"#cwdialog-btn-<\/span>\" +<\/span> settings.buttons.confirm.id<\/span>).trigger<\/span>('click'<\/span>);\r\n                } else<\/span> {\r\n                    \r\n                    $<\/span>me.dissapear();\r\n                }\r\n            }\r\n        });\r\n    };\r\n    \r\n    \/\/ Add buttons<\/span>\r\n    $<\/span>.each<\/span>(settings.buttons, function<\/span>(i, button) {\r\n        \r\n        if<\/span>(button) {\r\n            \r\n            \/\/ Create button<\/span>\r\n            var<\/span> $<\/span>_button =<\/span> $<\/span>('<button<\/span> id<\/span>=<\/span>\"cwdialog-btn-' + button.id + '\"<\/span>>').append<\/span>(button.text<\/span>);\r\n            \r\n            \/\/ Add custom class names<\/span>\r\n            if<\/span>(button.className<\/span>) {\r\n                $<\/span>_button.addClass<\/span>(button.className<\/span>);\r\n            }\r\n            \r\n            \/\/ Add to buttons<\/span>\r\n            $<\/span>_buttons.append<\/span>($<\/span>_button);\r\n            \r\n            \/\/ Callback (or close) function<\/span>\r\n            $<\/span>_button.on(\"click\"<\/span>, function<\/span>() {\r\n                \r\n                \/\/ Build response object<\/span>\r\n                var<\/span> response =<\/span> {\r\n                    clicked: button, \/\/ Pass back the object of the button that was clicked<\/span>\r\n                    input: ($<\/span>_input.val<\/span>() ? $<\/span>_input.val<\/span>() : null<\/span>) \/\/ User inputted text<\/span>\r\n                };\r\n                \r\n                button.action<\/span>( response );\r\n                \/\/$me.dissapear();<\/span>\r\n            });\r\n        }\r\n    });\r\n    \r\n    \/\/ Disabled browser actions while open<\/span>\r\n    if<\/span>(settings.override) {\r\n        $<\/span>window<\/span>.bind<\/span>('beforeunload'<\/span>, function<\/span>(e){ \r\n            return<\/span> \"An alert requires attention\"<\/span>;\r\n        });\r\n    }\r\n    \r\n    \/\/ Adjust dimensions based on window<\/span>\r\n    $<\/span>me.adjustWidth();\r\n    \r\n    $<\/span>window<\/span>.resize<\/span>( function<\/span>() { $<\/span>me.adjustWidth() } );\r\n    \r\n    \/\/ Append elements, show CWdialog<\/span>\r\n    $<\/span>CWdialog.html<\/span>(''<\/span>).append<\/span>( $<\/span>_inner.append<\/span>('<div class=\"cwdialog-content\">'<\/span> +<\/span> text +<\/span> '<\/div>'<\/span>) ).append<\/span>($<\/span>_buttons);\r\n    $<\/span>cA =<\/span> this<\/span>;\r\n    \r\n    if<\/span>(settings.input<\/span>) {\r\n        $<\/span>_inner.find<\/span>('.cwdialog-content<\/span>').append<\/span>( $<\/span>('<div<\/span> class<\/span>=\"cwdialog-input\"<\/span>>').append<\/span>( $<\/span>_input ) );\r\n    }\r\n    \r\n    $<\/span>overlay.fadeIn<\/span>(300<\/span>);\r\n    $<\/span>CWdialog.show<\/span>().animate<\/span>({\r\n        top: '20%'<\/span>\r\n    }, \r\n        settings.animation, \r\n        function<\/span>() {\r\n            $<\/span>me.keyPress();\r\n        }\r\n    );\r\n    \r\n    \/\/ Focus on input<\/span>\r\n    if<\/span>(settings.input<\/span>) {\r\n        $<\/span>_input.focus<\/span>();\r\n    }\r\n    \r\n} \/\/ end CWdialog();<\/span>\r\n<\/pre>\n
cwdialog.css<\/code> File:<\/h2>\n
 This file contains the following CSS codes.<\/p>\n
.cwdialog-overlay<\/span> {\r\n    background-color<\/span>:<\/span>#000<\/span>;\r\n    display<\/span>:<\/span> none<\/span>;\r\n    height<\/span>:<\/span> 100%<\/span><\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    position<\/span>:<\/span> fixed<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    z-index<\/span>:<\/span>9999<\/span>;\r\n    width<\/span>:<\/span> 100%<\/span><\/span>;\r\n    opacity<\/span>:<\/span> 0.7<\/span> !important<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> {\r\n    background<\/span>:<\/span> #fff<\/span>;\r\n    border<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> #aaa<\/span>;\r\n    box-shadow<\/span>:<\/span> 0px<\/span><\/span> 2px<\/span><\/span> 15px<\/span><\/span> rgba<\/span>(0,0,0,0.2<\/span>);\r\n    -mox-box-shadow<\/span>:<\/span> 0px<\/span><\/span> 2px<\/span><\/span> 15px<\/span><\/span> rgba<\/span>(0,0,0,0.2<\/span>);\r\n    -webkit-box-shadow<\/span>:<\/span> 0px<\/span><\/span> 2px<\/span><\/span> 15px<\/span><\/span> rgba<\/span>(0,0,0,0.2<\/span>);\r\n    color<\/span>:<\/span> #111<\/span>;\r\n    display<\/span>:<\/span> none<\/span>;\r\n    font-family<\/span>:<\/span> Arial<\/span>, sans-serif<\/span>;\r\n    font-size<\/span>:<\/span> 14px<\/span><\/span>;\r\n    left<\/span>:<\/span> 32%<\/span><\/span> !important<\/span>;\r\n    max-height<\/span>:<\/span> 90%<\/span><\/span>;\r\n    overflow<\/span>:<\/span> hidden<\/span>;\r\n    width<\/span>:<\/span>40%<\/span><\/span> !important<\/span>;\r\n    border-radius<\/span>:<\/span>7px<\/span><\/span>;\r\n    position<\/span>:<\/span> fixed<\/span>;\r\n    top<\/span>:<\/span> -100%<\/span><\/span>;\r\n    z-index<\/span>:<\/span>9999<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-inner<\/span> {\r\n    padding<\/span>:<\/span> 20px<\/span><\/span> 20px<\/span><\/span> 30px<\/span><\/span> 20px<\/span><\/span>;\r\n    font-family<\/span>:<\/span> 'Comic Sans MS'<\/span>;\r\n    font-size<\/span>:<\/span> 16px<\/span><\/span>;\r\n    color<\/span>:<\/span> #156A07<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-input<\/span> {\r\n    margin-top<\/span>:<\/span> 10px<\/span><\/span>;\r\n    padding<\/span>:<\/span> 10px<\/span><\/span> 0<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-input<\/span> input<\/span> {\r\n    border<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> rgba<\/span>(0,0,0,0.3<\/span>);\r\n    border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    -moz-border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    -webkit-border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 0px<\/span><\/span> 5px<\/span><\/span> rgba<\/span>(0,0,0,0.1<\/span>);\r\n    -mox-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 0px<\/span><\/span> 5px<\/span><\/span> rgba<\/span>(0,0,0,0.1<\/span>);\r\n    -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 0px<\/span><\/span> 5px<\/span><\/span> rgba<\/span>(0,0,0,0.1<\/span>);\r\n    display<\/span>:<\/span> block<\/span>;\r\n    font-size<\/span>:<\/span> 13px<\/span><\/span>;\r\n    margin<\/span>:<\/span> 0<\/span> auto<\/span>;\r\n    padding<\/span>:<\/span> 5px<\/span><\/span> 10px<\/span><\/span>;\r\n    width<\/span>:<\/span> 90%<\/span><\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-input<\/span> input<\/span>:focus<\/span> {\r\n    border-color<\/span>:<\/span> #01AEF0<\/span>;\r\n    outline<\/span>:<\/span> none<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> {\r\n    border-top<\/span>:<\/span> 1px<\/span><\/span> solid<\/span> #e5e5e5<\/span>;\r\n    box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> #fff<\/span>;\r\n    -moz-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> #fff<\/span>;\r\n    -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> #fff<\/span>;\r\n    padding<\/span>:<\/span> 20px<\/span><\/span> 20px<\/span><\/span>;\r\n    text-align<\/span>:<\/span> right<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span> {\r\n    background-color<\/span>:<\/span> #3276b1<\/span>;\r\n    border<\/span>:<\/span>1px<\/span><\/span> solid<\/span> #285e8e<\/span>;\r\n    border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    -moz-border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    -webkit-border-radius<\/span>:<\/span> 2px<\/span><\/span>;\r\n    cursor<\/span>:<\/span> pointer<\/span>;\r\n    font-size<\/span>:<\/span> 14px<\/span><\/span>;\r\n    margin<\/span>:<\/span> 0<\/span> 2px<\/span><\/span>;\r\n    overflow<\/span>:<\/span> hidden<\/span>;\r\n    border-radius<\/span>:<\/span>5px<\/span><\/span>;\r\n    font-family<\/span>:<\/span> 'Comic Sans MS'<\/span>;\r\n    padding<\/span>:<\/span> 6px<\/span><\/span> 12px<\/span><\/span>;\r\n    color<\/span>:<\/span>#FFF<\/span>;\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>.blue<\/span> { background<\/span>:<\/span> #01AEF0<\/span>; }\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>.red<\/span> { background<\/span>:<\/span> #D23A30<\/span>; }\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>.blue<\/span>, div<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>.red<\/span> {\r\n    color<\/span>:<\/span> #fff<\/span>;\r\n    text-shadow<\/span>:<\/span> 0px<\/span><\/span> -1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(0,0,0,0.4<\/span>);\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>:hover<\/span> {\r\n    box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 3px<\/span><\/span> rgba<\/span>(0,0,0,0.4<\/span>);\r\n    -moz-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 3px<\/span><\/span> rgba<\/span>(0,0,0,0.4<\/span>);\r\n    -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 3px<\/span><\/span> rgba<\/span>(0,0,0,0.4<\/span>);\r\n}\r\n\r\ndiv<\/span>.cwdialog<\/span> .cwdialog-buttons<\/span> button<\/span>:active<\/span> {\r\n    box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 2px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.8<\/span>);\r\n    -moz-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 2px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.8<\/span>);\r\n    -webkit-box-shadow<\/span>:<\/span> inset<\/span> 0px<\/span><\/span> 1px<\/span><\/span> 2px<\/span><\/span> rgba<\/span>(0,0,0,0.5<\/span>), 0px<\/span><\/span> 1px<\/span><\/span> 0px<\/span><\/span> rgba<\/span>(255,255,255,0.8<\/span>);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
The alert window is very common and useful things for every web projects. We use the alert dialog box for display messages in the browser. All browsers have their default alert window style. Many times <\/p>\n","protected":false},"author":1,"featured_media":360,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[125,124,66,16],"class_list":["post-356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-alertbox","tag-css","tag-javascript","tag-jquery","cat-6-id","has_thumb"],"yoast_head":"\nAlert Dialog Box using jQuery and CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Alert Dialog Box using jQuery and CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-02T15:17:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-27T17:53:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"604\" \/>\n\t<meta property=\"og:image:height\" content=\"391\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Alert Dialog Box using jQuery and CSS\",\"datePublished\":\"2014-12-02T15:17:32+00:00\",\"dateModified\":\"2016-04-27T17:53:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/\"},\"wordCount\":231,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/alert-dialog-box-using-jquery-css1.png\",\"keywords\":[\"AlertBox\",\"CSS\",\"JavaScript\",\"jQuery\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/\",\"name\":\"Alert Dialog Box using jQuery and CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/alert-dialog-box-using-jquery-css1.png\",\"datePublished\":\"2014-12-02T15:17:32+00:00\",\"dateModified\":\"2016-04-27T17:53:08+00:00\",\"description\":\"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/alert-dialog-box-using-jquery-css1.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/alert-dialog-box-using-jquery-css1.png\",\"width\":604,\"height\":391,\"caption\":\"alert-dialog-box-using-jquery-css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/alert-dialog-box-using-jquery-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alert Dialog Box using jQuery and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Alert Dialog Box using jQuery and CSS - CodexWorld","description":"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/","og_locale":"en_US","og_type":"article","og_title":"Alert Dialog Box using jQuery and CSS - CodexWorld","og_description":"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.","og_url":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2014-12-02T15:17:32+00:00","article_modified_time":"2016-04-27T17:53:08+00:00","og_image":[{"width":604,"height":391,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Alert Dialog Box using jQuery and CSS","datePublished":"2014-12-02T15:17:32+00:00","dateModified":"2016-04-27T17:53:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/"},"wordCount":231,"commentCount":2,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","keywords":["AlertBox","CSS","JavaScript","jQuery"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/","url":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/","name":"Alert Dialog Box using jQuery and CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","datePublished":"2014-12-02T15:17:32+00:00","dateModified":"2016-04-27T17:53:08+00:00","description":"Stylish alert dialog box using jQuery and CSS - Custom alert message popup using JavaScript, jQuery and CSS. View live demo and download script.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","width":604,"height":391,"caption":"alert-dialog-box-using-jquery-css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/alert-dialog-box-using-jquery-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Alert Dialog Box using jQuery and CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/12\/alert-dialog-box-using-jquery-css1.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-5K","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":1437,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/356\/revisions\/1437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/360"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}