Làm cách nào để vô hiệu hóa thanh cuộn trong hộp thoại Giao diện người dùng jQuery?

Question

Có ai biết nếu có cách tắt thanh cuộn trong hộp thoại jquery không? Nội dung tôi có trong div là 300 px nhưng hộp thoại được đặt thành 200px. Nó tự động đặt thanh cuộn nhưng tôi không muốn chúng. Tôi sẽ tự thêm nó vào div thứ hai làm cho nó lớn hơn cửa sổ. Bất kỳ trợ giúp được đánh giá cao.

Answer 1

Bạn có ý là jQuery UI dialog widget?

Bạn có thể chuyển tùy chọn khi tạo nó để chỉ định chiều cao của nó, ví dụ:

$('.selector').dialog({ height: 350 }); 

Làm cho nội dung của bạn cao hơn nội dung bạn đặt vào đó và tôi nghi ngờ bạn sẽ vàng.

Answer 2

Tôi không biết chính xác những gì bạn có ý nghĩa bởi một 'jquery hộp thoại', nhưng cách tiêu chuẩn để vô hiệu hóa các thanh cuộn sẽ được thiết lập thuộc tính tràn của div để 'ẩn'

đặt này trong thư mục css file:

div.class_name { 
    overflow: hidden; 
} 

Answer 3

tôi giải quyết vấn đề như thế này:

.dialog({ 
    title: $(this).attr("data-dialog-title"), 
    closeOnEscape: true, 
    close: function() { $(this).remove() }, 
    draggable: true, 
    position: 'center', 
    width: 500, 
    height: 'auto', 
    modal: true, 
    open: function (event, ui) { 
    $('#myDialogId').css('overflow', 'hidden'); //this line does the actual hiding 
    } 
}); 

Answer 4

Các overflow: hidden làm việc cho tôi. Khi chỉ thiết lập thông số chiều cao/chiều rộng, các thanh cuộn sẽ vẫn xuất hiện tùy thuộc vào kích thước văn bản và thu phóng.

Answer 5

này loại bỏ các thanh cuộn:

$("#dialog").dialog({ 
    autoOpen: false, 
    resizable: false, 
    dialogClass: 'info', 
    height: 'auto', 
    width: 'auto', 
    show: { effect: "blind", duration: 1000 }, 
    hide: {effect: "explode", duration: 1000 }, 
    draggable: true, 
    open: function (event, ui) { 
     $(this).dialog('open'); 
    }, 
    close: function (event, ui) { 
     cleanup() ; 
    } 
}); 

Answer 6

Giải pháp không có css hoặc Chiều cao cố định:

Tôi nghĩ rằng giải pháp tốt nhất cho vấn đề trên là để làm cho chiều cao hộp thoại năng động, chiều cao nên điều chỉnh tự động theo nội dung, khi nội dung tăng chiều cao phương thức sẽ tăng lên. Để làm điều này sử dụng chiều cao "tự động" tùy chọn được cung cấp bởi jquery UI phương thức, nó điều chỉnh chiều cao phương thức theo nội dung rất cần add 'overflow: hidden' hoặc 'height: 350'

$("#dialog").dialog({ 
modal : true, 
height:"auto" 

}); 

Answer 7

Trong ví dụ dưới đây Tôi cũng đã thêm 'resizable = false' cho hộp thoại. Vì vậy, không thể nhìn thấy bất kỳ văn bản tràn nào bằng cách thay đổi kích thước hộp thoại.

$("a#registerServerStudio , a#regServer").click(function(e) { 
    //alert("login using POST is Clicked"); 
    e.preventDefault(); 
    registerSuccess = false; 

    regSSDlg = $("#regSS").dialog({ 
     autoOpen: false, 
     height: 280, 
     width: 420, 
     modal: true, 
    resizable: false, 
     buttons: { 
     }, 
     close: function() { 
     registerSuccess = false; 
     }, 
    show:{effect:'bounce', duration: 100}, 

    }); 
    $('#regSS').css('overflow', 'hidden'); 
    regSSDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ; 

    regSSDlg.dialog("open"); 
});