0

When my modal window is visible, when i click on #screen or on #loading_modal i need to hide this div's, but how can i do that, and how to write it correctly, now my code is not working, but also i have same for two objects (#screen, #loading_modal).... I'm new in js, how to refactor this code, and make it working properly... ?

  if ($('#screen').is(':visible')) {
    $("#screen").click(function() {    
      $('#screen').hide();
      $('#loading_modal').hide();  
    });
     $("#loading_modal").click(function() {    
      $('#screen').hide();
      $('#loading_modal').hide();  
    });
  }
4

4 に答える 4

1

If I have understood you correctly I think you need to put the check for visibility inside the click handlers like so:

$("#screen").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
$("#loading_modal").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
于 2013-03-11T15:31:10.847 に答える
1

No need for the if statement here, you can simply use:

$('element:visible').click(function() { ... })

So:

$("#screen:visible").click(function() {    
    $(this).hide();
    $('#loading_modal').hide();  
});
 $("#loading_modal:visible").click(function() {    
    $('#screen').hide();
    $(this).hide();  
});

If the functions are going to perform identical tasks, you can simply use:

$("#screen:visible, #loading_modal:visible").click(function() {    
    $('#screen').hide();
    $('#loading_modal').hide();  
});
于 2013-03-11T15:33:20.990 に答える
1

you are doing wrong. you can check the Condition in click event. once the click event fired. put if conditon in side the click event handler

$("#screen").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
$("#loading_modal").click(function() {    
    if ($('#screen').is(':visible')) {
        $('#screen').hide();
        $('#loading_modal').hide();  
    }
});
于 2013-03-11T15:33:24.003 に答える
1

You can just refactor your code to look like this

$("#screen,#loading_modal").click(function() { 
      $('#screen,#loading_modal').hide();       
});

There's no need to check if it's visible

If it's dynamically created, you will need to delegate or bind after creation of the elements

$('body').on('click',"#screen,#loading_modal",function() { 
      $('#screen,#loading_modal').hide();       
});
于 2013-03-11T15:36:04.740 に答える