0

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

在此处输入图像描述

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

  1. jQuery UI 对话框可以像这样轻松地主题化还是我应该使用 blockui？
  2. 从 Stack Overflow 复制这种样式是否违法？

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

更新：

我想使用 jQueryUI 对话框，因为我真的很想在隐藏时实现爆炸。

hide: "explode"
4

2 回答 2

1

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

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

于 2011-02-04T05:44:03.583 回答
0

用 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>
于 2011-02-04T07:04:53.610 回答