Question

我在页面上使用了2个模态。我用按钮打开这些模态：

<button type="button" id="myBtn1">Modal 1</button>
<button type="button" id="myBtn2">Modal 2</button>

当我点击按钮时，按钮打开相同的模态。我该如何解决这个问题？

以下是模态

Modal1：

<div id="myModal1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="row">
      <div class="">
        <div class="x_content">                  
          <p>content modal 1</p>
        </div>
      </div>
    </div>
  </div>
</div>

Modal2：

<div id="myModal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="row">
      <div class="">
        <div class="x_content">                  
          <p>content modal 2</p>
        </div>
      </div>
    </div>
  </div>
</div>

脚本模式1：

<script>
    // Get the modal
    var modal = document.getElementById('myModal1');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn1");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

脚本模式2：

<script>
    // Get the modal
    var modal = document.getElementById('myModal2');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn2");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

Answer 1

你应该把私人功能

(function(){
    // Get the modal
    var modal = document.getElementById('myModal2');

    // Get the button that opens the modal
     var btn = document.getElementById("myBtn2");

    // Get the <span> element that closes the modal
    var span = modal.getElementsByClassName("close")[0];//<<<<pay attention here
    ...
}());

Answer 2

最好按照btn.onclick分配元素。您正在调用全局变量模态，它将使用最近分配的值。

// for first script
btn.onclick = function() {
    document.getElementById("myModal1").style.display = "block";
}


// for second script
btn.onclick = function() {
    document.getElementById("myModal2").style.display = "block";
}

Answer 3

不要为modal和btn改名。

尝试

// Get the modal
var modal1 = document.getElementById('myModal1');

// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");

// Get the modal
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn2 = document.getElementById("myBtn2");

按钮打开相同的模态

3 个答案: