The question is deeper. I have a popup code:

function box_info(id,value){ $(".info-"+id).show(); $(".info-"+id).css("display","block"); $("html,body").css("overflow","hidden"); if(value == 'close'){ $(".info-"+id).hide(); $(".info-"+id).css("display","none"); $("html,body").css("overflow","auto"); } $(document).mouseup(function(e){ if ($(".info-"+id).has(e.target).length === 0){ $(".info-"+id).hide(); $(".info-"+id).css("display","none"); $("html,body").css("overflow","auto"); } }); }; 
 body{ height: 1000px; } #info{ overflow:auto; position: fixed; z-index: 99997; width: 100%; text-align:center; background: rgba(0,0,0,0.7); top:0; bottom:0; left:0; right:0; } #info-box{ position:relative; z-index: 99998; max-width: 480px; min-height: 600px; margin: 10% auto; text-align:left; display:block; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2); -webkit-animation: info-top 0.35s ease-in-out; animation: info-top 0.35s ease-in-out; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='info' class='info-1' style='display: none;'> <div id='info-box'> Первый блок. Много текста и блоков. </div> </div> <div id='info' class='info-2' style='display: none;'> <div id='info-box'> Второй блок. Много текста и блоков. </div> </div> <button onclick='box_info(1);'>Открыть первый блок</button> <button onclick='box_info(2);'>Открыть второй блок</button>

The problem is in the scroll.

  1. Having opened the first or second pop-up, the scrolling block disappears and only the body scroll remains, when you next open the opposite pop-up and when you click on the block itself, a scroll of both appears. It is necessary to appear only from the body.

  2. I don’t know the adaptation, but on android 2.3 fixed it’s just awfully displayed and the unit doesn’t scroll.


How can you get around this, in addition to buying a new phone?

  • Android 2.3? Seriously? Do you really need support for these devices? It would seem that all of them have already abandoned and the percentage of the meager remained. This is how IE6 support in our time. - Ivan Pshenitsyn
  • @IvanPshenitsyn Well, let's not look at the android. The problem is still in the scroll itself. I am 100% sure that I wrote the code crookedly, but I don’t know how to do it correctly ( - Albert Ushakov
  • Could you please clarify what should happen when you click in a modal window? the code goes out that the window should hide. This is true? - Ivan Pshenitsyn
  • @IvanPshenitsyn Sorry, but something this block is closed when you click on the form inside this block. That is, when you click on a clean block, it does not close, all the rules, so I stuck in the form with input and with the focus the block closed - Albert Ushakov
  • @IvanPshenitsyn Noticed that all the text in the tags. Removed <span> from the text and the block is not closed by clicking on it. But he doesn’t roll like that ( - Albert Ushakov

1 answer 1

The main problem was that with each click on the button the event listener was hung on $ (document). Ie, after the first click on the button, the listener is one and the code when the mouseup is executed once. After the second, another one is added and the code is already executed twice. Well, and so on.

But if you just render a function in your code — the mouseup handler from the box_info function — an error will appear, the id variable is not defined. So I changed the code a bit, eliminating the need for id. I have defined a common class for pop-up windows and a single handler.

As far as I understand you, the pop-up window should close when you click on a gray background. The solution I proposed was, in my opinion, ugly, but I didn’t think of anything better with the current layout. But it works correctly.

 function box_info(id,value){ var $target = $("#info-"+id); if(value == 'close'){ $target.hide(); $("html,body").css("overflow","auto"); } else { $target.show(); $("html,body").css("overflow","hidden"); } }; $('.popup-window').on('click', function(e){ if(!$(e.target).hasClass('info-box') && !$(e.target).parents('.info-box').length){ $(this).hide(); $("html,body").css("overflow","auto"); } }); 
 body{ height: 1000px; } .popup-window{ display: none; overflow:auto; position: fixed; z-index: 99997; width: 100%; text-align:center; background: rgba(0,0,0,0.7); top:0; bottom:0; left:0; right:0; } .info-box{ position:relative; z-index: 99998; max-width: 480px; min-height: 600px; margin: 10% auto; text-align:left; display:block; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2); -webkit-animation: info-top 0.35s ease-in-out; animation: info-top 0.35s ease-in-out; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='info-1' class='popup-window'> <div class='info-box'> Первый блок. Много текста и блоков. <div style="width:200px;height:30px;background:red;">красный блок</div> </div> </div> <div id='info-2' class='popup-window'> <div class='info-box'> Второй блок. Много текста и блоков. <div style="width:200px;height:30px;background:green;">зеленый блок</div> </div> </div> <button onclick='box_info(1);'>Открыть первый блок</button> <button onclick='box_info(2);'>Открыть второй блок</button>

  • And on what hang up zakryvku? It should be like that on the background. - Albert Ushakov
  • Changed the answer and the code in it. Try it. Please note that this time I fixed the id and element classes. The first time I didn’t pay attention to how you use id. You can not use the same id on different elements! This is a unique identifier. It should be one per page. And css via id also need to try to write less. Nothing critical, but it is better to use classes for this purpose. - Ivan Pshenitsyn