我想彈出一個不是全屏的對話框，即它在打開它的頁面上方「漂浮」。這是我正在嘗試的：如何製作一個不是全屏的jQuery Mobile對話框？

<div data-role="page" id='Page1'> 
    <div data-role='button' id="Button1">Open Dialog</div> 
</div> 

<div data-role="dialog" id='Dialog' 
    style='width:200px; height:100px; top:100px; left:100px;'> 
    <div data-role='button' id="Button2">Close</div> 
</div> 

<script> 

Button1.onclick = function() { 
    //$.mobile.changePage($('#Dialog')) 
    $.mobile.changePage('#Dialog',{role:'dialog'}) 
} 

Button2.onclick = function() { 
    $(".ui-dialog").dialog("close"); 
}

即使我在Dialog的div上設置邊界，它仍然是全屏。

來源

2012-03-01 ghenne

我知道這是定於1.2版本：http://filamentgroup.com/tests/popup/docs/pages/popup/index.html – 2012-03-01 18:51:30

我怕的就是這個！ – ghenne 2012-03-01 19:58:49

這就是我想出了（之後，從碧玉一些偉大的提示）：

<div data-role="page" id='Page1'> 
    <div data-role='button' id="Button1" >Open Dialog</div> 
</div> 

<div data-role="dialog" id='Dialog'> 
    <div data-role='header'id='Dialog_header'><h1>Dialog</h1></div> 
    <div data-role='button' id="Button2">Close</div> 
</div> 

<script> 

Dialog_header.onclick= function(e){ 
    $("#Dialog").fadeOut(500); 
} 

Button1.onclick = function(e) { 
    var $dialog=$("#Dialog"); 
    if (!$dialog.hasClass('ui-dialog')) 
    {$dialog.page()}; 
    $dialog.fadeIn(500); 
} 

Button2.onclick = function() { 
    $("#Dialog").fadeOut(500); 
}

Button2的是一個意外收穫：它顯示瞭如何從代碼關閉對話框。

你可以在這裏擺弄： http://jsfiddle.net/ghenne/Y5XVm/1/

來源

2012-03-02 16:12:39 ghenne

爲什麼這被低估？ – 2012-08-05 12:13:04

其工作正常....真棒... – 2014-08-12 05:21:46

您可以強制這樣的對話框上的寬度：

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
}

通知我也去掉了背景，使對話能夠在另外一個頁面的頂部出現。剩下的唯一問題是當您導航到對話框時，另一個頁面被隱藏，因此對話框出現在白色背景之上。

這裏是一個演示：http://jsfiddle.net/jasper/TTMLN/

這是給你一個起點，我想創建自己的彈出窗口中的最好的方法就是手動顯示/隱藏對話框，以便jQuery Mobile的不能掩蓋舊的一頁。

更新

你當然可以使用一個對話框，彈出一個自定義編碼少量：

$(document).delegate('#dialog-link', 'click', function() { 

    var $dialog = $('#dialog'); 
    if (!$dialog.hasClass('ui-dialog')) { 
     $dialog.page(); 
    } 
    $dialog.fadeIn(500); 

    return false; 
});

哪裏dialog-link是打開的對話框，彈出一個鏈接的ID。

這是一個輕微的更新到CSS居中水平模態：

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
    left  : 50% !important; 
    margin-left : -37.5% !important; 
}

這裏是一個演示：http://jsfiddle.net/jasper/TTMLN/1/

來源

2012-03-01 19:03:01 Jasper

我需要使用changePage，而不是html =「＃dialog」。當我這樣做時，CSS中的背景設置似乎被忽略。更嚴重的是，調用頁面被隱藏起來。看起來這將不得不等待Phill提到的增強功能。 – ghenne 2012-03-01 20:06:29

@ghenne我在回答中提到了這些問題，我希望你會試圖找出答案......無論如何，檢查**更新**我的答案。 **更新的**代碼創建了一個相當漂亮的彈出窗口。 – Jasper 2012-03-01 20:30:00

感謝提示 - 我學到了一些新的技巧，並能夠將它們應用於一個更簡單的解決方案。 – ghenne 2012-03-02 16:15:06

這裏，就是你可以use..this插件插件也可定製與烏爾自己的HTML。

來源

2013-04-10 06:56:21

回答

更新

相關問題