使用JQuery彈出框

我是JQuery的新手，並試圖在我的頁面上添加一個彈出框。
我使用下面的jQuery插件（從雷石的leanModal通過）：使用JQuery彈出框

(function($) { 
    $.fn.extend({ 
    leanModal: function(options) { 
     var defaults = { 
     top: 100, 
     overlay: 0.5, 
     closeButton: null 
     }; 
     var overlay = $("<div id='lean_overlay'></div>"); 
     $("body").append(overlay); 
     options = $.extend(defaults, options); 
     return this.each(function() { 
     var o = options; 
     $(this).click(function(e) { 
      var modal_id = $(this).attr("href"); 
      $("#lean_overlay").click(function() { 
      close_modal(modal_id) 
      }); 
      $(o.closeButton).click(function() { 
      close_modal(modal_id) 
      }); 
      var modal_height = $(modal_id).outerHeight(); 
      var modal_width = $(modal_id).outerWidth(); 
      $("#lean_overlay").css({ 
      "display": "block", 
      opacity: 0 
      }); 
      $("#lean_overlay").fadeTo(200, o.overlay); 
      $(modal_id).css({ 
      "display": "block", 
      "position": "fixed", 
      "opacity": 0, 
      "z-index": 11000, 
      "left": 50 + "%", 
      "margin-left": -(modal_width/2) + "px", 
      "top": o.top + "px" 
      }); 
      $(modal_id).fadeTo(200, 1); 
      e.preventDefault() 
     }) 
     }); 

     function close_modal(modal_id) { 
     $("#lean_overlay").fadeOut(200); 
     $(modal_id).css({ 
      "display": "none" 
     }) 
     } 
    } 
    }) 
})(jQuery);

我的CSS是這樣的：

#lean_overlay { 
    position: fixed; 
    z-index:100; 
    top: 0px; 
    left: 0px; 
    height:100%; 
    width:100%; 
    background: #000; 
    display: none; 
} 
#signup { 
    width: 404px; 
    padding-bottom: 2px; 
    display:none; 
    background: red; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7); 
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); 
    -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7); 
}

我的初始化腳本是這樣的：

<script type="text/javascript"> 
    $(function() { 
    $("#signup").leanModal(); 
    }); 
</script>

最後，這是我正在使用的HTML：

<p id="examples" class="section box"> 
    <strong>Example:</strong> 
    <a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a> 
</p> 

<div id="signup"> 
    <div id="signup-ct"> 
    <div id="signup-header"> 
     <h2>This is a test</h2> 
     <p>testing.</p> 
     <a class="modal_close" href="#"></a> 
    </div> 
    </div> 
</div>

有了這段代碼，彈出框不會彈出&我有一種感覺，對此必須有一個非常簡單的修復方法，但是我正試圖弄清楚它的意思。任何幫助，你可以給予不勝感激！

來源

2013-05-15 user2387572

控制檯中的任何錯誤？ – Turnip

你應該看看只添加jQueryUI並刪除該插件。 [** jQueryUI **]（http://jqueryui.com/）具有[**。dialog（）**]（http://jqueryui.com/dialog/）用於這樣的事情，並且非常易於使用和風格。 – SpYk3HH

試試這個http://goo.gl/ZE21u3 –

我知道別人建議使用現有的庫（強烈推薦）。但是，如果你想用你的特定代碼來解決問題，這裏是我認爲你做錯了：

你用'leanmodal'調用鉤住了錯誤的元素。

我創建了一個jsFiddle，它可以在點擊鏈接時彈出想要的對話框。你可以在這裏訪問： http://jsfiddle.net/eWUgE/

基本上，我已經修改了以下行：

$("#signup").leanModal();

成爲：

$('#go').click(function() { 
    $(this).leanModal(); 
});

來源

2013-05-15 22:03:48

出於某種原因，你必須點擊鏈接兩次。我沒有花更多的時間來尋找這個問題，但解決方案的要點應該是顯而易見的。 –

非常感謝你！它幫助我瞭解我錯在哪裏。我最終選擇了其他人建議的jQuery UI，但由於我對此非常感興趣，所以我非常感謝您的解釋和示例。再次感謝您:-) – user2387572

肯定是最好的解決方案之一是使用jQuery的UI。如果你不需要整個庫，你只能下載模態插件。

Chears

來源

2013-05-15 22:05:56 Sandcar

謝謝！ jQuery UI解決了我的問題。 – user2387572

使用JQuery彈出框

回答

相關問題