Center jQuery popUp dialog mit auto-width und auto-Höhe

Ich habe nach der Initialisierung des jQuery-popUp-dialog, mit dynamischen Inhalten :

  jQuery("#popUp").live("click", function (e) {
   e.preventDefault();
    jQuery("<div></div>")
        .addClass("dialog")
        .attr("id", "popUpDialog")
        .appendTo("body")
        .dialog({
            title: jQuery(this).attr("data-dialog-title"),
            close: function() { jQuery(this).remove(); },
            modal: true,
            hide: { effect: "none", duration: 150 },
            show: { effect: "none", duration: 150 },
            width: 'auto',
            height: 'auto',
            position: {
                my: 'center',
                at: 'center',
            of: jQuery(window)
            }
        }).load(this.href);

    jQuery(".close").live("click", function (e) {
        e.preventDefault();
        jQuery(this).closest(".dialog").dialog("close");
    });
});

});

Sorry das ich mich für diese einfachste Frage , aber ich kann nicht platzieren Sie das popUp-Fenster auf Mitte der ganzen Seite . Das problem ist :

                  position: {
                  my: 'center',
                  at: 'center',
              of: jQuery(window)}
  • position: { my: 'center', in: 'center', von: jQuery(window) } entfernen Sie diese es bydefault es zeigen dialog-box in der Mitte
InformationsquelleAutor Nic | 2013-10-10
  1. 4

    Das Problem ist, weil der dialog positioniert ist, bevor sein Inhalt geladen wird, und somit seine Größe ändert. Ändern Sie Ihre Logik, so dass der Inhalt zuerst geladen wird, und dann instanziieren der dialog:

    $('<div />', {
  class: 'dialog',
  id: 'popUpDialog' 
}).appendTo('body').load(this.href, function() {
  //set up the dialog in the callback of the AJAX request...
  $(this).dialog({
    title: jQuery(this).attr("data-dialog-title"),
    close: function() { jQuery(this).remove(); },
    modal: true,
    hide: { effect: "none", duration: 150 },
    show: { effect: "none", duration: 150 },
    width: 'auto',
    height: 'auto',
    position: {
      my: 'center',
      at: 'center',
      of: window
    }
  })
});
    • Ich benutze es viel in meiner Anwendung (MVC) .Klicken Sie auf der Schaltfläche, die id 'popUp' wird der Inhalt angezeigt im popUp , wie kann ich ändern meine Logik ,kann ich SeTimeOut Funktion?
    • Könnten Sie, würden Sie brauchen, um die linke position zu (window.width / 2) - (dialog.width / 2) und das gleiche für die top-position.
    InformationsquelleAutor Rory McCrossan
  2. 0

    Dies sollte genug für die option position :

    position:'center'

    funktioniert es ?

    • Nein, es funktioniert nicht ,ich t funktionieren wird, wenn ich angeben, Breite und Höhe mit width:auto und height:auto funktioniert nicht...
    InformationsquelleAutor john Smith
Schreibe einen Kommentar