從下拉框中創建一個彈出窗口

我是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

從下拉框中創建一個彈出窗口

回答

相關問題