Vị trí hộp thoại JavaScript

User61956409 đã đăng

Chào nisoft,

tôi  có hộp thoại jquery mà tôi muốn hiển thị ở góc dưới cùng bên trái của hình ảnh và tôi đang sử dụng. vị trí ({của tôi. 'đáy', tại. 'bên trái của. target });, nhưng nó không hoạt động

Bạn có thể thử chỉ định vị trí như thế này để hiển thị hộp thoại ở góc dưới cùng bên trái của hình ảnh

Vị trí hộp thoại JavaScript
var target = $("#appdefaultID");
$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function () {
            $(this).dialog("close");
        }
    },
    position: { my: "left top+15", at: "left", of: target }
})

Vị trí hộp thoại JavaScript

Trân trọng,

Fei Han

Trong chương này, chúng ta sẽ thấy một trong những phương thức tiện ích của jqueryUi, phương thức position(). Phương thức position() cho phép bạn định vị một phần tử đối với phần tử khác hoặc sự kiện chuột

Giao diện người dùng jQuery mở rộng. position() từ lõi jQuery theo cách cho phép bạn mô tả cách bạn muốn định vị một phần tử giống như cách bạn mô tả nó cho người khác một cách tự nhiên. Thay vì làm việc với các con số và toán học, bạn làm việc với các từ có ý nghĩa (chẳng hạn như trái và phải) và các mối quan hệ

cú pháp

Sau đây là cú pháp của phương thức position() −

.position( options )

Trong đó các tùy chọn thuộc loại Đối tượng và cung cấp thông tin chỉ định cách định vị các phần tử của tập hợp được bao bọc. Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này -

Sr. Không. Tùy chọn và Mô tả

Tùy chọn này chỉ định vị trí của các phần tử được bao bọc (những phần tử được định vị lại) để căn chỉnh với phần tử hoặc vị trí đích. Theo mặc định, giá trị của nó là trung tâm

Tùy chọn - của tôi

Tùy chọn này chỉ định vị trí của các phần tử được bao bọc (những phần tử được định vị lại) để căn chỉnh với phần tử hoặc vị trí đích. Theo mặc định, giá trị của nó là trung tâm

Hai trong số các giá trị này được sử dụng để chỉ định vị trí. trên cùng, bên trái, dưới cùng, bên phải và ở giữa, được phân tách bằng ký tự khoảng trắng, trong đó giá trị đầu tiên là giá trị nằm ngang và giá trị thứ hai là giá trị dọc. Việc giá trị đơn đã chỉ định được coi là ngang hay dọc tùy thuộc vào giá trị bạn sử dụng (ví dụ: trên cùng được coi là dọc, trong khi bên phải là ngang)

Ví dụ

top, or bottom right.

2 giờ

Tùy chọn này thuộc loại Chuỗi và chỉ định vị trí của phần tử đích để căn chỉnh các phần tử được định vị lại. Nhận các giá trị giống như tùy chọn của tôi. Theo mặc định, giá trị của nó là trung tâm

Tùy chọn - tại

Tùy chọn này thuộc loại Chuỗi và chỉ định vị trí của phần tử đích để căn chỉnh các phần tử được định vị lại. Nhận các giá trị giống như tùy chọn của tôi. Theo mặc định, giá trị của nó là trung tâm

Ví dụ

"right", or "left center"

3 của

Đây là loại Selector hoặc Element hoặc jQuery hoặc Event. Nó xác định phần tử đích mà các phần tử được bao bọc sẽ được định vị lại hoặc một phiên bản Sự kiện chứa tọa độ chuột để sử dụng làm vị trí đích. Theo mặc định, giá trị của nó là null

Tùy chọn - của

Đây là loại Selector hoặc Element hoặc jQuery hoặc Event. Nó xác định phần tử đích mà các phần tử được bao bọc sẽ được định vị lại hoặc một phiên bản Sự kiện chứa tọa độ chuột để sử dụng làm vị trí đích. Theo mặc định, giá trị của nó là null

Ví dụ

#top-menu

4 va chạm

Tùy chọn này thuộc loại Chuỗi và chỉ định các quy tắc sẽ được áp dụng khi phần tử được định vị mở rộng ra ngoài cửa sổ theo bất kỳ hướng nào. Theo mặc định, giá trị của nó là lật

Tùy chọn - va chạm

Tùy chọn này thuộc loại Chuỗi và chỉ định các quy tắc sẽ được áp dụng khi phần tử được định vị mở rộng ra ngoài cửa sổ theo bất kỳ hướng nào. Theo mặc định, giá trị của nó là lật

Chấp nhận hai (ngang theo sau là dọc) sau đây -

  • flip - Lật phần tử sang phía đối diện và chạy lại phát hiện va chạm cho phù hợp. Nếu không bên nào phù hợp, trung tâm được sử dụng làm phương án dự phòng

  • vừa vặn - Giữ phần tử theo hướng mong muốn, nhưng điều chỉnh vị trí sao cho vừa vặn

  • flipfit − Đầu tiên áp dụng logic lật, đặt phần tử ở bất kỳ phía nào cho phép hiển thị nhiều phần tử hơn. Sau đó, logic phù hợp được áp dụng để đảm bảo càng nhiều phần tử hiển thị càng tốt

  • none - Vô hiệu hóa phát hiện va chạm

Nếu một giá trị được chỉ định, nó sẽ áp dụng cho cả hai hướng

Ví dụ

"flip", "fit", "fit flip", "fit none"

5sử dụng

Tùy chọn này là chức năng thay thế nội hàm thay đổi vị trí phần tử. Được gọi cho mỗi phần tử được bao bọc bằng một đối số duy nhất bao gồm hàm băm đối tượng với các thuộc tính bên trái và trên cùng được đặt thành vị trí đích được tính toán và phần tử được đặt làm ngữ cảnh hàm. Theo mặc định, giá trị của nó là null

Tùy chọn - sử dụng

Tùy chọn này là chức năng thay thế nội hàm thay đổi vị trí phần tử. Được gọi cho mỗi phần tử được bao bọc bằng một đối số duy nhất bao gồm hàm băm đối tượng với các thuộc tính bên trái và trên cùng được đặt thành vị trí đích được tính toán và phần tử được đặt làm ngữ cảnh hàm. Theo mặc định, giá trị của nó là null

Ví dụ

{horizontal: "center", vertical: "left", important: "horizontal" }

6trong vòng

Tùy chọn này là một phần tử Bộ chọn hoặc Phần tử hoặc jQuery và cho phép bạn chỉ định phần tử nào sẽ được sử dụng làm hộp giới hạn để phát hiện va chạm. Điều này có thể hữu ích nếu bạn cần chứa phần tử được định vị trong một phần cụ thể trên trang của mình. Theo mặc định, giá trị của nó là cửa sổ

Tùy chọn - trong vòng

Tùy chọn này là một phần tử Bộ chọn hoặc Phần tử hoặc jQuery và cho phép bạn chỉ định phần tử nào sẽ được sử dụng làm hộp giới hạn để phát hiện va chạm. Điều này có thể hữu ích nếu bạn cần chứa phần tử được định vị trong một phần cụ thể trên trang của mình. Theo mặc định, giá trị của nó là cửa sổ

Ví dụ

Ví dụ sau minh họa việc sử dụng phương thức vị trí

________số 8

Hãy để chúng tôi lưu đoạn mã trên vào tệp HTML positionmethodexample. htm và mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem đầu ra sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ này, chúng ta thấy rằng -

  • Hộp 1 được căn chỉnh vào giữa (theo chiều ngang và chiều dọc) của phần tử div

  • Hộp 2 được căn chỉnh ở trên cùng bên trái (theo chiều ngang và chiều dọc) của phần tử div

  • Hộp 3 được hiển thị ở góc trên cùng bên phải của cửa sổ, nhưng để lại một số phần đệm để thông báo nổi bật hơn. Điều này được thực hiện bằng cách sử dụng các giá trị ngang và dọc của my hoặc at

  • Đối với Hộp 4, giá trị của được đặt làm đối tượng sự kiện. Đây là một sự kiện được liên kết với một con trỏ và di chuyển với sự kiện chuột

    Làm cách nào để đặt vị trí của hộp thoại trong jQuery?

    Cú pháp. $( ". bộ chọn"). hộp thoại({ vị trí. { của tôi. "trên cùng bên trái", tại. "phía dưới bên trái", của. nút } });

    Làm cách nào để đóng hộp thoại trong Javascript?

    close() Phương thức close() của giao diện HTMLDialogElement đóng

    Cách sử dụng hộp thoại giao diện người dùng trong jquery?

    Hộp thoại là một cửa sổ nổi có tiêu đề và vùng nội dung. Cửa sổ này có thể được di chuyển, thay đổi kích thước và tất nhiên, đóng bằng biểu tượng "X" theo mặc định. jQueryUI cung cấp phương thức hộp thoại() chuyển đổi mã HTML được viết trên trang thành mã HTML để hiển thị hộp thoại .

    Làm cách nào để thay đổi kích thước của hộp thoại trong jquery?

    Tùy chọn chiều rộng hộp thoại được sử dụng để đặt chiều rộng của hộp thoại tính bằng pixel. Theo mặc định, giá trị là 300. cú pháp. $( ".