Question

I ‘m trying to make a fullscreen dialog using jquery ui.

I have some content loaded 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 does not appear on center and without the correct dimensions.
Has anyone has ever had the same problem ?

Thanks

Answer 1

I would like to see this in jfiddle to get a better understanding of any variable differences that can affect this. Try to remove the “Width” and “Height” settings for your dialog properties, and add the css properties of width:100% and height:100% to the container you call for the dialog content. “#popupRecurso”. That way the dialog properties do not override it, and it changes with any DOM change events of size. I currently work with modals a lot at my company, and have had similar issues. I like to set the css properties to something like width: %120, height:120%. This way the dialog functionality you are looking for stays true, even when the user zoom way in or out. Hopefully this will help you out. Happy coding!