Question

我想让其他图标起作用，以便“操作管理”如何起作用。但是我希望它说不同的话。

请帮助：（

这是我的小提琴：https://jsfiddle.net/RonaLochner/p4kt6oy1/

代码：

<div class='circle-container'>
    <a href='#' class='center'>
        <h4 style="text-align:center;">Microsoft Dynamics 365</h4>
    </a>
    <div id="operations-management">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
    </div>

    <div id="reporting">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon3.png' id="myBtn">
    </div>
    <div id="supplychain">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon4.png' id="myBtn">
    </div>
    <div id="sales">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon5.png' id="myBtn">
    </div>
    <div id="financial">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon6.png' id="myBtn">
    </div>
    <div id="project">
        <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon1.png' id="myBtn">
    </div>
</div>

模型：

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>OPERATIONS MANAGEMENT</p>
  </div>
</div>

脚本

<script>

// Get the modal
var modal = document.getElementById('myModal')

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

// 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>

我尝试使用其他ID作为目标，但未提起诉讼。

Answer 1

所以您要做的第一件事就是像这样向每个图标/按钮添加一个类；

<div class="toggle" id="operations-management">
    <img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
</div>

然后您要使用querySelectorAll调用它们并将其转换为数组

// Get the button that opens the modal
var btns = Array.from(document.querySelectorAll(".toggle"));

我们将其转换为数组，因为querySelectorAll返回一个节点列表，但是我们需要一个数组来遍历所有按钮，以便在数组的位置。因此，我们遍历所有按钮，并添加一个指向新功能showModal

的事件侦听器

btns.forEach(function(btn) {
  btn.addEventListener("click", showModal);
});

showModal函数将显示模态。

function showModal(e) {
  modal.style.display = "block";
}

现在您可能希望每种模式都有不同的内容吗？我将使用id在模态中使用p标签，然后使用showModal函数中的（e）变量，我将找到按钮的id，然后使用if语句根据ID更改模态p标签。从e传递。（如果您在我设置modal.style.display之前设置console.log（e），您将看到一个对象，在那里您可以找到ID。

单击不同的图标（不是Bootstrap）时，如何显示不同的模态/模态内容

1 个答案: