JQuery ui dialog in full screen

I am trying to make a fullscreen dialog using jquery ui.

I have some content downloaded via ajax and the result fills the dialog:

function openResource(id) {
  $.ajax({
    url      : "",
    type     : 'post',
    dataType : 'html',
    data : {
      idRes: id
    },
    success : function(response) {
      $("#popupRecurso")
        .html("<div style='float:right; cursor: pointer;' onclick='$(\"#popupRecurso\").dialog(\"destroy\");'>fechar</div>" + response);

      $("#popupRecurso").dialog({
        title       : '',
        bgiframe    : true,
        position    : 'center',
        draggable   : false,
        resizable   : false,
        dialogClass : 'dialogRecurso',
        width       : $(window).width(),
        height      : $(window).height(),
        stack       : true,
        zIndex      : 99999,
        autoOpen    : true,
        modal       : true,
        open        : function() {
          $(".ui-dialog-titlebar").hide();
        },
        error : function(err) {
          alert(err);   
        }
      });
    }
  });
}

Unfortunately, the dialog is not displayed in the center and without the correct size. Has anyone had the same problem?

thank

+5
source share
1 answer

jfiddle, , . "" "" css : 100% : 100% , . "#popupRecurso". , , DOM. . css - width:% 120, height: 120%. , , , , . , . !

+1

All Articles