Search code examples
jqueryjquery-uimodal-dialogblockui

Implementing Stack Overflow flag like modal

As I was browsing through Stack Overflow, I had to flag something to the mods.
While doing so, I saw a wonderfully designed popup and I have shamelessly ported that. :)

enter image description here

Now I would like to have a modal associated with it. I would like to have a generic solution.
My questions are:

  1. Can jQuery UI dialog be themed like this easily or shall I go with blockui?
  2. Is it illegal to copy this style from Stack Overflow?

Also I didnt see any plugins used by SO for this. Have they implemented their own popup?

Update:

I would like to use jQueryUI dialog as I really would like to implement explode on hide.

hide: "explode"
Solution

  • Did it with jQuery BlockUI. Any better implementations are welcome

    <html>
<head>
    <title>Popup Test</title>
    <style type="text/css">
        div{
            border: none !important;   
        }
        .popup {
            -moz-box-shadow: 2px 2px 5px black;
            background-color: #FFFFFF;
            border: 10px solid #AE0000 !important;
            display: none;
            padding: 15px;
            position: absolute;
            z-index: 1;
        }

        .popup-close {
            position: absolute; 

        }
        .popup-close a {
            -moz-border-radius: 25px 25px 25px 25px;
            -moz-box-shadow: 2px 2px 5px #666666;
            background-color: #000000;
            color: #FFFFFF;
            font-size: 30px;
            font-weight: bold;
            left: -34px;
            padding: 0 7px;
            position: relative;
            top: -35px;
        }
        a.popup-actions-cancel {
            color:Blue;
        }
        a:hover.popup-actions-cancel {
            text-decoration: underline;  
        }
    </style>

    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">
        google.load("jquery", "1.4.4");
        google.load("jqueryui", "1.8.9");
    </script>
    <script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.34"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#showpopup").css("text-decoration", "underline");
            $("a").css("cursor", "pointer");
        });
        $(".popup-hide").live("click", function () {
            $.unblockUI();
        });
        $("#showpopup").live("click", function () {
            $.blockUI({ message: $('#popup1') }); 
        });
    </script>
</head>
<body>
    <div style="padding-left: 20px; padding-top: 20px;">
        <a id="showpopup">Click to Block UI</a>
    </div>
    <div id="popup1" class="popup">
        <div class="popup-close popup-hide"><a title="close this popup (or hit Esc)">&times;</a></div>
        <div>
            Hello world!
        </div>
        <div class="popup-actions">
            <div style="float:left; margin-top:18px;">
                <a class="popup-actions-cancel popup-hide">cancel</a>
            </div>
        </div>
    </div>
</body>
</html>