要实现按钮点击弹出所有的模态框，而不是只显示一个，可以使用以下代码示例解决：

HTML代码：

点击弹出模态框



  

    ×
    
模态框1
    
这是模态框1的内容。
  




  

    ×
    
模态框2
    
这是模态框2的内容。
  

CSS代码：

.modal {
    display: none; /* 默认隐藏模态框 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

JavaScript代码：

// 获取按钮和所有的模态框
var btn = document.getElementById("btn");
var modals = document.getElementsByClassName("modal");

// 点击按钮时显示所有模态框
btn.addEventListener("click", function() {
  for (var i = 0; i < modals.length; i++) {
    modals[i].style.display = "block";
  }
});

// 点击模态框上的关闭按钮时隐藏模态框
var closeBtns = document.getElementsByClassName("close");
for (var i = 0; i < closeBtns.length; i++) {
  closeBtns[i].addEventListener("click", function() {
    this.parentNode.parentNode.style.display = "none";
  });
}

这段代码首先获取按钮和所有的模态框元素，然后给按钮添加点击事件监听器。当按钮被点击时，通过循环将所有模态框的display属性设置为"block"，使其显示出来。

接着，通过循环为每个模态框上的关闭按钮添加点击事件监听器。当关闭按钮被点击时，通过parentNode属性找到父级模态框元素，并将其display属性设置为"none"，隐藏模态框。

这样，点击按钮时会弹出所有的模态框，每个模态框都可以通过关闭按钮进行隐藏。