Disable 'X' ở góc trên bên phải của hộp thoại

Question

thể trùng lặp:
Remove close button on jQueryUI Dialog?

Tôi đang cố gắng để thực hiện một hộp thoại yêu cầu người dùng phải đồng ý với các điều khoản trước khi tiếp tục và không muốn cho phép người dùng chỉ cần nhấp vào 'X' ở góc trên cùng bên phải của hộp thoại để đóng. Tôi muốn yêu cầu người dùng nhấp vào 'Tôi đồng ý'.

Có cách nào để vô hiệu hóa 'X' trong hộp thoại không?

Làm rõ: Tôi chỉ đang sử dụng hộp thoại Giao diện người dùng jQuery chuẩn: $ .dialog().

Answer 1

tôi giả sử bạn đang sử dụng jQuery UI.

Nếu vậy, hãy đính kèm bộ xử lý sự kiện beforeClose và trả về false nếu nút Đồng ý chưa được nhấp. Bạn cũng có thể sử dụng CSS để thiết lập các nút X để {display: none}

var agreed = false; //has to be global 
$("something").dialog({ 
    buttons: { 
     'Apply': function() { 
      agreed = true; 
      $(this).dialog("close"); 
     } 
    }, 
    beforeClose: function() { 
     return agreed; 
    } 
}); 

Answer 2

Nếu hộp thoại của bạn là cửa sổ bật lên thông thường, bạn không thể ngăn người dùng đóng cửa sổ.

Bạn có thể sử dụng plugin hộp thoại jQuery modal, chẳng hạn như jqModal.

Lưu ý, tuy nhiên, bạn cũng không thể ngăn người dùng đóng cửa sổ chính.

---

EDIT: Nếu bạn đang sử dụng hộp thoại jQuery UI, bạn có thể thêm các quy tắc CSS sau:

#someId .ui-dialog-titlebar-close { 
    display: none; 
} 

Bạn shouldalso thiết lập closeOnEscape-false.

---

Ngoài ra, tại sao bạn buộc người sử dụng bấm I Agree?
Tại sao bạn không thể xử lý một cửa sổ đã đóng như thể bạn không đồng ý?

Answer 3

Nếu bạn đang sử dụng alert, có lẽ bạn nên xem xét confirm thay vì:

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) { 
    // they didn't click OK 
} else { 
    // they did. 
} 

Hoặc, sử dụng a plugin như SLaks nêu

Answer 4

Theo như công việc của bạn không cho phép người dùng nhấp vào X, Tôi sẽ giới thiệu một trong một số phương pháp tiếp cận:

1. sử dụng quy tắc CSS để đặt hiển thị cho nút đó thành 'không'. Sử dụng chế độ Kiểm tra của Firebug, bạn sẽ có thể xem thẻ mà hộp thoại Giao diện người dùng jQuery đặt ở đó và thêm một quy tắc CSS cho nó. Nếu màn hình không hiển thị, người dùng không thể nhấp vào nó.
2. Tương tự, đính kèm một sự kiện jQuery .click() không có gì, và trả về false để dừng sự kiện tuyên truyền (tôi chưa bao giờ thực sự làm việc này, nhưng nó sẽ hoạt động).
3. Bạn có thể đính kèm hàm vào sự kiện beforeClose() của hộp thoại cho phép bạn ngăn hộp thoại đóng nếu người dùng không nhấp "Tôi đồng ý"
4. Hầu hết mọi thứ phức tạp, nhưng hữu ích nếu bạn muốn có hộp thoại tương tự hoặc thực hiện các thay đổi chức năng khác, bạn có thể phân lớp hộp thoại giao diện người dùng jQuery bằng cách tạo một plugin jQuery UI mà nội bộ instantiates hộp thoại sau đó sửa đổi hành vi mặc định bằng cách áp dụng các quy tắc CSS hoặc đính kèm sự kiện như mô tả ở trên.

Hope một trong những giúp bạn đi đúng hướng ...

Answer 5

Nhận thấy rằng div tạo cho thanh tiêu đề của hộp thoại có một thuộc tính aria-labelledby tham chiếu của bạn hộp thoại (ui-thoại-title- {yourDialogName}), vì vậy tôi chỉ ẩn "x" với CSS sau:

div.ui-dialog[aria-labelledby="ui-dialog-title-myDialog"] a.ui-dialog-titlebar-close { 
    display: none; 
}

Tôi cũng đặt closeOnEscape thành false để ngăn chặn điều đó.

Answer 6

Tôi thêm có sự cố liên quan: tải lại sau khi người dùng nhấp vào X để đóng trong cửa sổ hộp thoại cụ thể, không tải lại trong các cửa sổ khác. Tôi đã thêm vào chức năng hộp thoại jQuery bằng .js:

.click(function(i){ jQuery('span.ui-dialog-title').each(function(index) { 


    if (jQuery(this).text() == '/**Title String Here**/') { 

     a.close(i); location.reload(true); 

    } else { 

     a.close(i); 
    } 

    }); 
return false}) 

Điều này sẽ tìm tiêu đề trong văn bản span và tải lại khi gần, nếu không gần không tải lại.

Answer 7

Chỉ bổ sung cho câu trả lời của Michael Meadows. Nếu bạn có nhiều biểu mẫu và không muốn có biến toàn cục, bạn chỉ có thể thêm thuộc tính vào phần tử DOM biểu mẫu. Một cái gì đó như:

$('#yourForm').dialog(
open : function(){ 
    $('#yourForm').attr('agreed', false); 
}, 
beforeClose : function(){ 
    return $('#yourForm').attr('agreed') == 'true'; 
}, 
buttons:{'OK':function(){ 
     $('#yourForm').attr('agreed', true);   
     $(this).dialog('close'); 
    }, 
    'Cancel' : function(){ 
     $('#yourForm').attr('agreed', false); 
     $(this).dialog('close'); 
    } 
} 
); 

Tôi nghĩ bạn phải so sánh với 'true' và không chỉ đúng vì tôi nghĩ rằng attr được lưu trữ dưới dạng chuỗi. nhưng tôi không chắc chắn về điều đó ....

Answer 8

Tôi thấy điều này trên bài khác, hy vọng nó sẽ giúp, nó làm việc cho tôi:

$("#div2").dialog({ 
    closeOnEscape: false, 
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); } 
}); 

Đây là liên kết:

How to remove close button on the jQuery UI dialog?