在不使用jQuery UI的情況下使用'x'顯示模態對話框

不使用jQuery UI尋找模態對話框的非常簡單的實現。在不使用jQuery UI的情況下使用'x'顯示模態對話框

只是舉例

<div class="modal" id="something" style="display: none;"> 
    <div class "titlebar"> 
     <h4>title</hr> 
     <a href="#" >xx</a> 
    </div> 
    <div class=content></div> 
    <div class=footer></div> 
</div>

當我想顯示對話框，關閉時，用戶PRES「XX」的按鈕，用戶點擊。我看到一些例子，但它有很多額外的東西。我正在尋找像點擊按鈕顯示對話這樣的事情，它應該呆在那裏，直到用戶點擊'x'沒有jqueryui。

任何簡單的例子都會很棒。

來源

2011-02-01 Jon

此鏈接如何？ http://www.queness.com/post/77/simple-jquery-modal-window-tutorial我希望能幫到你 – 2011-02-01 21:59:32

http://stackoverflow.com/questions/2789773/jquery-modal-dialog-without-jqueryui – sunn0 2011-02-01 22:00:46

我認爲你在尋找這樣的事情：

$('.modal .titlebar a').click(function() { 
    $(this).parents('.modal').hide(); 
}); 

$('button.open-modal').click(function() { 
    $('#something').show(); 
});

來源

2011-02-01 22:01:38

這裏是一個非常基本的版本：

$("<iframe id='shim' src='http://jsbin.com/abira4'>").css({ 
    width: "100%", 
    height: "100%", 
    position: "absolute", 
    left: "0px", 
    top: "0px", 
    zIndex: "100", 
    backgroundColor: "#fff", 
    opacity: "0.5" 
}).appendTo(document.body); 
$("<div>Hi there, click me to dismiss</div>").css({ 
    zIndex: "101", 
    border: "1px solid black", 
    backgroundColor: "#ecc", 
    position: "absolute", 
    left: "100px", 
    top: "100px" 
}).appendTo(document.body) 
    .click(function() { 
    $(this).remove(); 
    $("#shim").remove(); 
});

它是如何工作的：

我們創建一個iframe充當頁面正文的一部分。這消除了我們稍後添加的「對話框」div之外的任何點擊，並且還處理了OS渲染控件和Flash動畫彈出到頂部的問題。我們也使它成爲半透明的（在這種情況下，背景顏色爲#f0f0f0，不透明度爲50％），因此它會「隱藏」底層文檔。這絕對定位在0,0，寬度和高度均爲100％，z索引爲100（這必須高於頁面上的其他任何內容）。 iframe的src應該是空白文檔。
然後，我們爲「對話框」創建一個div，該對話框也是絕對定位的，並且z-index高於iframe填充。

現在，有很多的變化。例如，沒有任何理由可以在HTML文檔中而不是在腳本中使用模型div標記 — - 直到您需要爲止display: none。像這樣的東西。

顯然，這個版本讓你點擊對話框上的任何地方來解除它，但它很容易修改，只允許在某處使用[X]關閉。並說它可以使用一些造型，將其放在溫和的地方。

所有這一切說，我不能說它是遠程防彈。這就是經過充分測試的插件的原因。 :-)

來源

2011-02-01 22:07:28

在不使用jQuery UI的情況下使用'x'顯示模態對話框

回答

相關問題