打開和關閉只需點擊一下，莫代爾

Question

我已經創建了點擊一個對話框彈出，顯示 - 我想點擊同一鏈接，關閉該對話框彈出：

這裏是一個工作示例：http://jsfiddle.net/zidski/4ASft/

下面

代碼：

$(document).ready(function(){ 

    $('ul').each(function() { 
     $(this).find('li').click(function() { 
      var listItem = this; 
      alert($(listItem).text()); 
     }); 
    }); 

    $('.activate_modal').click(function(){ 
     //get the id of the modal window stored in the name of the activating element  
     var modal_id = $(this).attr('name'); 
     //use the function to show it 
     show_modal(modal_id); 
    }); 

    $('.close_modal').click(function(){ 
     //use the function to close it 
     close_modal(); 
    }); 
}); 

//THE FUNCTIONS 
function close_modal(){ 
    //hide the mask 
    $('#mask').fadeOut(500); 
    //hide modal window(s) 
    $('.modal_window').fadeOut(500); 
} 
function show_modal(modal_id){ 

    //set display to block and opacity to 0 so we can use fadeTo 
    $('#mask').css({ 'display' : 'block', opacity : 0}); 
    //fade in the mask to opacity 0.8 
    $('#mask').fadeTo(500,0.8); 
    //show the modal window 
    $('#'+modal_id).fadeIn(500); 
} 

Answer 1

在這裏你去

http://jsfiddle.net/4ASft/2/

Answer 2

http://jsfiddle.net/Z5RH2/

$('#'+modal_id+',#mask').fadeToggle(500); 

應該這樣做。

Answer 3

我的解決辦法：http://jsfiddle.net/4ASft/3/

$('.activate_modal').click(function(){ 
    //get the id of the modal window stored in the name of the activating element  
    var modal_id = $(this).attr('name'); 
    //use the function to show it or close it 
    if($('#'+modal_id).is(":visible")) { 
     close_modal(); 
    } else { 
     show_modal(modal_id); 
    } 
    return false; 
}); 

Answer 4

您可以使用jQuery的toggle事件兩個狀態之間切換。

http://jsfiddle.net/4ASft/4/

Answer 5

if($('#modal_id').is(':visible')) 
    $('#modal_id').hide(); 
else 
$('#modal_id').show(); 
    return false;