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/Z5RH2/

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

应该这样做。

Answer 2

你去吧

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

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;

单击“模态”即可打开和关闭

5 个答案: