วิธีจัดการกล่องโต้ตอบ jQuery UI อัตโนมัติเมื่อปรับขนาดเบราว์เซอร์

เมื่อคุณใช้กล่องโต้ตอบ jquery UI ทุกอย่างทำงานได้ดียกเว้นสิ่งเดียว เมื่อปรับขนาดเบราว์เซอร์กล่องโต้ตอบจะอยู่ในตำแหน่งเริ่มต้นซึ่งอาจสร้างความรำคาญได้มาก

คุณสามารถทดสอบได้ที่: http://jqueryui.com/demos/dialog/

คลิกที่ตัวอย่าง "กล่องโต้ตอบโมดอล" และปรับขนาดเบราว์เซอร์ของคุณ

ฉันชอบที่จะให้กล่องโต้ตอบเป็นศูนย์กลางอัตโนมัติเมื่อเบราว์เซอร์ปรับขนาด สามารถทำได้อย่างมีประสิทธิภาพสำหรับกล่องโต้ตอบทั้งหมดในแอปของฉันหรือไม่

ขอบคุณมาก!

การตั้งค่าpositionตัวเลือกจะบังคับให้ทำเช่นนี้เพียงใช้ตัวเลือกเดียวกันที่ครอบคลุมกล่องโต้ตอบทั้งหมดของคุณที่ฉันใช้#dialogที่นี่ (หากไม่พบก็จะไม่มีการดำเนินการใด ๆ เช่น jQuery ทั้งหมด):

jQuery UI ก่อน 1.10

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10 หรือสูงกว่า

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

นี่คือหน้าสาธิต jQuery UI เดียวกันที่เพิ่มเฉพาะโค้ดด้านบนเราเพิ่งเพิ่มตัวจัดการให้กับresizeเหตุการณ์ของหน้าต่างด้วย.resize()ดังนั้นมันจึงทริกเกอร์ re-center ในเวลาที่เหมาะสม

อีกทางเลือกหนึ่งสำหรับคำตอบของ Ellesedil

วิธีแก้ปัญหานั้นไม่ได้ผลสำหรับฉันในทันทีดังนั้นฉันจึงทำสิ่งต่อไปนี้ซึ่งเป็นเวอร์ชันไดนามิก แต่สั้นลง:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

+1 สำหรับ Ellesedil แม้ว่า

แก้ไข:

เวอร์ชันที่สั้นกว่ามากซึ่งใช้งานได้ดีสำหรับกล่องโต้ตอบเดียว:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

ไม่จำเป็นสำหรับ. each () ที่จะใช้ในกรณีที่คุณมีกล่องโต้ตอบที่ไม่เหมือนใครซึ่งคุณไม่ต้องการสัมผัส

คำตอบที่ครอบคลุมมากขึ้นซึ่งใช้คำตอบของนิคในทางที่มีความยืดหยุ่นมากขึ้นสามารถพบได้ที่นี่

การปรับรหัสความเกี่ยวข้องจากเธรดนั้นอยู่ด้านล่าง ส่วนขยายนี้จะสร้างการตั้งค่าไดอะล็อกใหม่ที่เรียกว่า autoReposition ซึ่งยอมรับว่าเป็นจริงหรือเท็จ โค้ดตามที่เขียนจะกำหนดค่าเริ่มต้นให้ตัวเลือกเป็นจริง ใส่ลงในไฟล์. js ในโปรเจ็กต์ของคุณเพื่อให้เพจของคุณสามารถใช้ประโยชน์จากมันได้

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

วิธีนี้ช่วยให้คุณสามารถระบุ "จริง" หรือ "เท็จ" สำหรับการตั้งค่าใหม่นี้เมื่อคุณสร้างกล่องโต้ตอบบนเพจของคุณ

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

ตอนนี้กล่องโต้ตอบนี้จะเปลี่ยนตำแหน่งตัวเองเสมอ AutoReposition (หรืออะไรก็ตามที่คุณเรียกการตั้งค่า) สามารถจัดการกับกล่องโต้ตอบใด ๆ ที่ไม่มีตำแหน่งเริ่มต้นและเปลี่ยนตำแหน่งโดยอัตโนมัติเมื่อปรับขนาดหน้าต่าง เนื่องจากคุณกำลังตั้งค่านี้เมื่อคุณสร้างกล่องโต้ตอบคุณจึงไม่จำเป็นต้องระบุกล่องโต้ตอบใด ๆ เนื่องจากฟังก์ชันการเปลี่ยนตำแหน่งจะรวมอยู่ในกล่องโต้ตอบนั้นเอง และส่วนที่ดีที่สุดคือเนื่องจากมีการตั้งค่านี้ต่อกล่องโต้ตอบคุณสามารถมีการเปลี่ยนตำแหน่งของกล่องโต้ตอบตัวเองและบางรายการยังคงอยู่

ให้เครดิตกับผู้ใช้ scott.gonzalez บนฟอรัม jQuery สำหรับโซลูชันที่สมบูรณ์

ตัวเลือก CSS เท่านั้นที่ใช้ได้ผลคือ ระยะขอบลบควรเท่ากับครึ่งหนึ่งของความสูงและครึ่งหนึ่งของความกว้าง ดังนั้นในกรณีนี้กล่องโต้ตอบของฉันกว้าง 720px คูณ 400px สิ่งนี้จัดกึ่งกลางในแนวตั้งและแนวนอน

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

หรือสามารถใช้ตำแหน่ง jQuery ui

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

สวัสดีทุกคน!

วิธีการแก้ปัญหา Vanilla JS:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());