Реализация флага переполнения стека, как модальный - PullRequest
Новая
       5

Реализация флага переполнения стека, как модальный

0 голосов
/ 04 февраля 2011

Когда я просматривал Stack Overflow, мне нужно было что-то пометить для модов.
При этом я увидел чудесно спроектированное всплывающее окно и беззастенчиво портировал его.:)

enter image description here

Теперь я бы хотел, чтобы модал был связан с ним.Я хотел бы иметь универсальное решение.
Мои вопросы:

  1. Может ли диалоговое окно jQuery UI быть таким же тематическим, или я должен идти с blockui?
  2. Это незаконно?скопировать этот стиль из переполнения стека?

Также я не видел никаких плагинов, используемых SO для этого.Реализовали ли они свое собственное всплывающее окно?

Обновление:

Я хотел бы использовать диалоговое окно jQueryUI, поскольку я действительно хотел бы реализовать разнесение при скрытии. 

hide: "explode"

Ответы [ 2 ]

1 голос
/ 04 февраля 2011

Я не считаю незаконным копировать дизайны с другого сайта, если вы не копируете изображения и исходный код.

Я бы предпочел jQuery UI для этого вместо написания собственного всплывающего окна.

0 голосов
/ 04 февраля 2011

Сделал это с помощью jQuery BlockUI.Любые лучшие реализации приветствуются 

<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>
...