当前位置：文江博客话题详情

像模态一样实现 Stack Overflow 标志

发布于 2024-10-16 00:07:02 字数 434 浏览 2 评论 0原文

当我浏览 Stack Overflow 时，我必须向 mods 标记一些内容。
在这样做的过程中，我看到了一个设计精美的弹出窗口，我无耻地移植了它。 :)

在此处输入图像描述

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

jQuery UI 对话框的主题可以是这样吗这很容易还是我应该选择 blockui？
抄袭这种风格违法吗来自堆栈溢出？

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

更新：

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

hide: "explode"

原文

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:

Can jQuery UI dialog be themed like
this easily or shall I go with blockui?
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"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻之岛 2024-10-23 00:07:02

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

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

回复收藏 0 原文

浅语花开 2024-10-23 00:07:02

用 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)">×</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>

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)">×</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>

回复收藏 0 原文

~没有更多了~