Geek Answers Handbook

How to create a jQuery Mobile dialog that is not fullscreen?

I would like to open a dialog that is not full screen, i.e. he “floats” over the page that opened it. Here is what I am trying:

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

Despite the fact that I set the borders in the Divog div, it is still displayed full screen.

+5
source share
3 answers

Here's what I came up with (after some wonderful hints from 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 is a bonus: it shows how to close a dialog from code.

You can play here: http://jsfiddle.net/ghenne/Y5XVm/1/

+7
source

You can force the width in the dialog as follows:

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

, , . , , , .

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

, , - / , jQuery Mobile .

Update

:

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

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

    return false;
});​

dialog-link - , .

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/

+5

here is a plugin that you can use ... this plugin is also customizable using its own html.

simpleDialogue plugin for jQuery mobile

0
source

More articles:


All Articles