Question

能否请您告诉我如何打开第二个模式窗口？现在，当您单击不同的链接时，将打开同一窗口。请告诉我。如何区分它们。请帮助代码。老实说，我不知道可以澄清哪些细节，但是stackoverflow.com不允许保存问题。

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

我同意@aaaaane，但您的做法不正确。您应该检查有关javascript promise方法或异步回调操作的信息。

您不知道服务器的响应时间，您的模式将一直为空，直到响应。

此外，您必须在<a>标签上使用一种方法才能理解。像这样；

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

Answer 2

只需更改元素之一的id。该ID必须始终是唯一的。

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>

打开2个模态窗口js

2 个答案: