Question

我仍然有点新编码，我正在用一些东西帮助一些朋友。

所以，我在我的代码中创建了一个弹出文本，这是一个按钮，我想要制作第二个和第四个，每个都有它自己的文本和特定的东西，但我还没有能够，请帮忙吗？

这是我的代码。

 <script type="text/javascript">
$(document).bind('keydown', function (e) {
    if (e.which === 13) { // return
        $('#searchBtn').trigger('click');
    }
});
  </script>

var modal = document.getElementById('myModal1');
var btn = document.getElementById("myBtn1");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Answer 1

检查下面的代码段。为所有模态添加唯一的ID，并在按钮的target中添加相同的值。

＆＃13;

var modal;


btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click',btnClick,false);
}

spans = document.getElementsByClassName('close');
for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener('click',spanClick,false);
}

function btnClick() {
    modal = document.getElementById(this.getAttribute("target"));
    modal.style.display = "block";
}

function spanClick() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

＆＃13;

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

＆＃13;

<div class="container-fluid">
    <br><br>

        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
        <!-- Trigger/Open The Modal -->
<button id="myBtn1" class="button" target="myModal1"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal2"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal3"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal4"><H1>FRUTAS Y VERDURAS</H1></button>

<div id="myModal1" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    1
    <ol style="list-style-type: 1">
        <li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
        <li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
        <li>Secarlas bien.</li>
    </ol>
  </div>
</div>

<div id="myModal2" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    2
    <ol style="list-style-type: 1">
        <li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
        <li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
        <li>Secarlas bien.</li>
    </ol>
  </div>
</div>


<div id="myModal3" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    3
    <ol style="list-style-type: 1">
        <li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
        <li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
        <li>Secarlas bien.</li>
    </ol>
  </div>
</div>

<div id="myModal4" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    4
    <ol style="list-style-type: 1">
        <li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
        <li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
        <li>Secarlas bien.</li>
    </ol>
  </div>
</div>
</div>
            <div class="col-md-1"></div>
</div>

    </div>

＆＃13;

双重弹出HTML

1 个答案: