Question

当我浏览Stack Overflow时，我不得不在mods上标记一些东西在这样做的同时，我看到了一个设计精美的弹出窗口，我无耻地移植了它。：）

enter image description here

现在我想要一个与之相关的模态。我想有一个通用的解决方案我的问题是：

jQuery UI对话框可以像主题一样这很容易还是我应该用blockui？
复制此样式是否违法来自Stack Overflow？

此外，我没有看到SO使用的任何插件。他们是否实施了自己的弹出窗口？

更新：

我想使用jQueryUI对话框，因为我真的想在hide上实现爆炸。

hide: "explode"

Answer 1

我不认为从其他网站复制设计是非法的，只要您不复制图像和源代码。

我更喜欢jQuery UI，而不是编写自定义弹出窗口。

Answer 2

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

像模态一样实现Stack Overflow标志

2 个答案: