Question

尝试将图像模式添加到以下代码中。

它应该是一个下拉菜单，当您单击菜单中的一个选项时，它应该作为模式图像打开。该图像不可调整大小或移动，类似于弹出图像，但提供了以下选项：关闭窗口并保持在同一页面上。

已将模式添加为CSS，但仅在下拉菜单中的文本顶部显示，而不是在单击文本时显示。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #c2d500;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #c2d500;
}

.dropdown {
position: relative;
display: inline-block;
width: 250px;
height:720px;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 250px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h1><center>Frequently Asked Questions</center></h1>
<p><center> Select your question from the menu below:</center></p>

<center><div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Questions</button>
<div id="myDropdown" class="dropdown-content">

    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ1.png"     target="_blank">What is the minimum and maximum amount for purchase?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ2.png" target="_blank">Who may purchase ECU investment shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ3.png" target="_blank">What type of investment accounts are available for ECU Investment shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ4.png" target="_blank">Are ECU Investment Shares insured by DICO?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ5.png" target="_blank">What type of investors should consider ECU Investment Shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ6.png" target="_blank">How can I buy ECU Investment Shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ7.png" target="_blank">How would I know the status of my order for purchase which is in a “waiting list”?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ8.png" target="_blank">Is there a minimum term in ECU investment shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ9.png" target="_blank">Will there be fees involved in ECU investment shares?</a>
    <a href="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ10.png" target="blank">When and how may I redeem my shares?</a>
    <a hreaf="https://www.ecusolutions.com/SharedContent/images/FAQ/FAQ11.png" target="_blank">If I have an ECU Non-Redeemable GIC (non-registered, TFSA or RRSP) at a special rate, but would like to transfer its funds to ECU Investment shares available, will I be able to do this?</a>

 </div></center>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>


</html>

谢谢您的帮助！

从下拉菜单中单击后添加图像的模态

0 个答案: