打开2个模态窗口js

Question

Can you please tell me how to open the second modal window? Now open when you click on different links open the same window. Tell me please. How to make a distinction between them. Please help code. And I honestly do not understand what details can be clarified, but stackoverflow.com does not allow to save the question.

 function send($i) { $("#div1").load("prod.php/?id_prod=" + $i); } function show(state) { document.getElementById('window').style.display = state; document.getElementById('wrap').style.display = state; } 

 #wrap { display: none; opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; } #window { width: 400px; height: 400px; margin: 50px auto; display: none; background: #fff; z-index: 200; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; border-radius: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a onclick="send('25');show('block');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window</a> <div onclick="show('none')" id="wrap"></div> <div id="window"> <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png"> <div id="div1"> Window 1 </div> </div> <a onclick="send('25');show('block');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window 2</a> <div onclick="show('none')" id="wrap"></div> <div id="window"> <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png"> <div id="div1"> Window 2 </div> </div> 

Answer 1

I agree with @aaaaane but your approach is not true. You should check about javascript promise methods or async callback operations.

You can't know response time of server and your modal will be empty until response.

Also you must use one method on <a> tag for understandable. like this;

<a onclick="someMethod(25)">Button</a>

Answer 2

Just had to change the id of one of the elements. The id must be always unique.

 function send($i) { $("#div1").load("prod.php/?id_prod=" + $i); } function show(state, id) { document.getElementById(id).style.display = state; document.getElementById('wrap').style.display = state; } 

 #wrap { display: none; opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; } .window { width: 400px; height: 400px; margin: 50px auto; display: none; background: #fff; z-index: 200; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; border-radius: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a onclick="send('25');show('block', 'window');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window</a> <div onclick="show('none')" id="wrap"></div> <div id="window" class='window'> <img class="close" onclick="show('none', 'window')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png"> <div id="div1"> Window 1 </div> </div> <a onclick="send('25');show('block', 'window-2');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window 2</a> <div onclick="show('none')" id="wrap"></div> <div id="window-2" class='window'> <img class="close" onclick="show('none', 'window-2')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png"> <div id="div1"> Window 2 </div> </div>