2011-02-04 46 views
0

當我瀏覽堆棧溢出時,我不得不標記某些東西給mods。
雖然這樣做,我看到了一個設計精美的彈出窗口,我無恥地移植了它。 :)實現堆棧溢出標誌,如模式

enter image description here

現在我想有一個與之關聯的模式。我想有一個通用的解決方案。
我的問題是:

  1. 可以jQuery UI的對話框中主題像 這一點很容易要不我去blockui?
  2. 從堆棧溢出複製這種風格 是非法的嗎?

此外,我沒有看到SO所使用的任何插件。他們實施了自己的彈出窗口嗎?

更新:

我想用jQueryUI的對話框,我真的想實施爆炸的隱藏。

hide: "explode" 

回答

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

我不認爲它是非法的從其他網站複製設計,只要你不復製圖像和源代碼。

我寧願jQuery UI而不是寫一個自定義彈出窗口。