从下拉框中创建一个弹出窗口

我是JavaScript新手，所以请随身携带。我希望能够打开一个下拉菜单，当我选择其中一个选项时，会弹出一个小窗口，并提供更多选项。我发现这张图中显示的东西：http://datasmugglers.com/wp-content/uploads/mute-someone.jpg 从下拉框中创建一个弹出窗口

我搜索了Google搜索，但找不到任何接近解决方案的东西。我可以创建一个下拉链接到其他页面，但那不是我正在寻找的。

此外，我愿意更改语言或使用JQuery之类的外部库来完成此任务。

我会后我的代码，但它实际上只是从W3Schools的下拉教程有了一些变化......

来源

2017-02-11 Katwatsu

这些更改可能是相关的。向我们展示代码 –

简短的回答：

有了一个默认<select>控制，它不能做。 OnClickListeners不能附加到<option>元素。

备份答案：您可以创建一个自定义的下拉列表，基本建立和造型自己的HTML元素，当你点击它，显示项目的列表，即一个<ul>元素与一些选项和附加onClickListeners那些展现你警报。

来源

2017-02-11 20:05:25

1.创建模态 - 在您的HTML文档中使用display:hidden创建模态。

2.监听点击 - 在javascript中添加一个事件监听器，监听链接上的任何点击。

3.显示您的Modal - 当有人点击您的链接时，将您的模式的显示更改为block。

var link = document.getElementById('your-link'); 
var modal = document.getElementById('your-modal'); 

link.addEventListener("click", function(){ 
    modal.style.display = 'block'; 
});

来源

2017-02-11 20:06:19

龙答：下面是一些示例代码：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    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-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 
</style> 
<style> 
/* Popup container - can be anything you want */ 
.popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/* The actual popup */ 
.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
    margin-bottom: -250px; 
} 



/* Toggle this class - hide and show the popup */ 
.popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 

/* Add animation (fade in the popup) */ 
@-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} 
} 
</style> 
</head> 
<body style="text-align:center"> 

<h2>Hoverable Dropdown</h2> 
<p>Move the mouse over the button to open the dropdown menu.</p> 

<div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <div class="popup" onclick="myFunction()">popup1 
     <span class="popuptext" id="myPopup1">A Simple Popup1!</span> 
    </div><br><br> 
    <div class="popup" onclick="myFunction()">popup2 
     <span class="popuptext" id="myPopup2">A Simple Popup2!</span> 
    </div><br><br> 
    <div class="popup" onclick="myFunction()">popup3 
     <span class="popuptext" id="myPopup3">A Simple Popup3!</span> 
    </div> 
    </div> 
</div> 



<script> 
// When the user clicks on div, open the popup 
function myFunction() { 
    var popup = document.getElementById("myPopup2"); //you can easily switch this with JS 
    popup.classList.toggle("show"); 
} 
</script> 

</body> 
</html>

此示例使用popup.classList.toggle("show");显示或隐藏弹出。你应该明白从w3schools下降。

希望这会有所帮助！

来源

2017-02-11 20:07:24 pudility

从下拉框中创建一个弹出窗口

回答

相关问题