Question

Chciałbym wyświetlić okno dialogowe, które nie jest w trybie pełnoekranowym, tzn. "Pływa" nad stroną, która je otworzyła. Oto, co próbuję:

<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"); 
} 

Mimo że ustawiam granice w dziale dialogowym Dialog, nadal jest to pełny ekran.

Answer 1

Oto co wymyśliłem (po kilka świetnych wskazówek z Jasper) :

<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 to bonus: pokazuje, jak zamknąć okno dialogowe od kodu.

Można bawić się z nim tutaj: http://jsfiddle.net/ghenne/Y5XVm/1/

Answer 2

Można wymusić szerokość w oknie dialogowym tak:

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

Wskazówka Ja również usunąć tło więc dialogowe mogą pojawiać się na górze drugiej strony. Jedynym problemem pozostaje to, że po przejściu do okna dialogowego druga strona jest ukryta, więc okno dialogowe pojawia się na białym tle.

Oto demo: http://jsfiddle.net/jasper/TTMLN/

Jest to punkt wyjścia dla Ciebie, myślę, że najlepszym sposobem, aby stworzyć swój własny popup jest ręcznie pokazać/ukryć okno tak jQuery Mobile nie ukryć starą stronę .

Aktualizacja

Można oczywiście użyć okna dialogowego jako popup z niewielką ilością niestandardowym kodowaniu:

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

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

    return false; 
});​ 

Gdzie dialog-link jest identyfikator linku, który otwiera okno jako popup.

Oto niewielka zmiana w CSS do wyśrodkować modal poziomo:

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

I tu jest demo: http://jsfiddle.net/jasper/TTMLN/1/

Answer 3

o to plugin, który u można use..this wtyczki jest konfigurowalny z ur własny html.

simpleDialogue plugin for jquery mobile