时间戳

首页 > 解决方案 > 根据按下的按钮将不同的内容打开到模式中

javascript - 根据按下的按钮将不同的内容打开到模式中

问题描述

我有一个简单的模式，我设法获得多个链接（按钮）来触发模式，但是，我还需要根据按下的链接（按钮）将不同的内容加载到模式中。所以我有几个链接：

<a class="myBtn" href="#">Cats</a>

<a class="myBtn" href="#">Dogs</a>

我有我的内容 div：

    <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Cats</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div>  


<div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Dogs</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div>

最后是我的 JS

<script type="text/javascript">
    
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.querySelectorAll(".myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    [].forEach.call(btn, function(el) {
    // When the user clicks the button, open the modal 
        el.onclick = function() {
          modal+'me'.style.display = "flex";
        }
    })
    
    // 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>

如前所述，我想在单击一个链接时将 Cats 内容 DIV 加载到模态中，并在单击另一个链接时将 Dogs 内容 DIV 加载到同一模态中。

我想我需要使用 data-ID 或其他东西来使按钮独一无二，但这就是我迷路的地方。有没有人有办法解决吗。谢谢

标签： javascriptmodal-dialog

解决方案

有各种解决方案。

'use strict';

const animalLinks = document.querySelectorAll('[data-animal-link]');
const animalModals = document.querySelectorAll('[data-animal-modal]');

document.addEventListener('click', (evt) => {
    evt.preventDefault();
    const target = evt.target;

    if (target && target.matches('[data-animal-link]')) {
        let value = target.dataset.animalLink;
        
        // check target
        console.log(value)

        animalModals.forEach((item) => {
            if (item.dataset.animalModal === value) {
                item.style.display = 'block';
            }
        });
    }
});
#myModal {
  display: none;
  width: 100px;
  height: 100px;
}

[data-animal-modal = 'cats'] {
  background-color: tomato;
}

[data-animal-modal = 'dogs'] {
  background-color: gold;
}
<a data-animal-link="cats" class="myBtn" href="#">Cats</a>
<a data-animal-link="dogs" class="myBtn" href="#">Dogs</a>

<div data-animal-modal="cats" id="myModal" class="modal"></div>
<div data-animal-modal="dogs" id="myModal" class="modal"></div>

这是一个简单的代码。您可以为您的任务修复它。

推荐阅读