2010-09-22 41 views
5


Tôi có một div được tạo ra thông qua ajax, tôi muốn vô hiệu hóa toàn bộ cơ thể khi div là popup và cho đến khi, trừ khi div được đóng lại.
Điều này có thể xảy ra trong jquery không. Xin vui lòng cho tôi biết ý kiến ​​của bạnlàm thế nào để vô hiệu hóa toàn bộ cơ thể khác với một div

Cảm ơn,
Praveen Jayapal

+1

Âm thanh đáng ngờ như hộp đèn. cf. http://leandrovieira.com/projects/jquery/lightbox/ – annakata

Trả lời

9

bạn muốn loại bỏ, hoặc ẩn cơ thể? Về mặt kỹ thuật, điều này không thể thực hiện được vì bạn cần gắn thêm div vào phần thân để xem nó. Những gì bạn có thể làm là tạo ra một lớp 'mặt nạ' bao gồm cơ thể WHOLE, sau đó sử dụng z-index cho div của bạn để hiển thị nó trên đầu trang của cơ thể.

Cái gì như:

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

có thể giúp đỡ!

Để ẩn hoàn toàn trang tất cả các bạn sẽ cần phải làm là thay đổi dòng 21:

$('#mask').fadeTo("slow",0.8);

trong javascript để:

$('#mask').fadeTo("slow",1);

và màu sắc của mặt nạ trên dòng 7 của CSS có thể được thay đổi thành bất kỳ thứ gì bạn muốn:

background-color: #000;

+0

chính xác đây là những gì tôi cần :) .. cảm ơn buddy – praveenjayapal

6

Điều đó sẽ làm các trick ..

HTML:

<body> 
    <div id="overlay"> 
     this is above the body! 
    </div> 
<!--...rest...--> 
</body> 

CSS:

#overlay { 
    background-color: #ccc; /*or semitransparent image*/ 
    display: none; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 
#ajax-div { 
    z-index: 200; /*important, that it is above the overlay*/ 
} 

Javascript:

<script type="text/javascript"> 
$(document).ready(function() { 
    //your ajax-call 
    $.ajax({ 
     //on success 
     success: function() { 
      //your logic your showing the ajax-div 
      $('#overlay').show(); //or fadeIn() 
     } 
    }) 

    //use live to catch the close-click of the later added ajax-div 
    $('#ajax-div a#close').live('click', function() { 
     //close the ajax-div 
     $(this).parent().hide(); 
     //close the overlay 
     $('#overlay').hide(); //or, again, fadeOut() 
    }); 
}); 
</script> 
+0

Một nỗ lực có Tim! Tốt cho bạn. – roborourke

2

gì có vẻ như bạn muốn là một cái gì đó được gọi là một hộp thoại phương thức cái hộp.

Có một số tập lệnh JQuery để đạt được điều này khá dễ dàng. Dưới đây là một số liên kết cho bạn:

Hy vọng rằng sẽ giúp.

1

OK ... ý tưởng tốt nhất là sử dụng jquey.ui nếu bạn sử dụng jquery.

http://jqueryui.com/demos/dialog/#modal

Bạn có thể chọn chủ đề và tải về chỉ các thành phần mà bạn thích ..

Sau đó, chỉ bao gồm js và css một thư mục img và hộp thoại cuộc gọi. Thật yên tĩnh ...

Các vấn đề liên quan