Создание всплывающего окна из раскрывающегося списка

Я новичок в javascript, поэтому, пожалуйста, со мной. Я хочу открыть раскрывающееся меню, и когда я выберу один из параметров, появится небольшое окно с большим количеством доступных опций. Что-то на этой картинке я нашел: http://datasmugglers.com/wp-content/uploads/mute-someone.jpg Создание всплывающего окна из раскрывающегося списка

Я искал Google и искал, но я не могу найти ничего близкого к решению. Я могу создать раскрывающийся список с ссылками, которые будут идти на другие страницы, но это не то, что я ищу.

Также я открыт для меняющихся языков или для использования внешних библиотек, таких как JQuery.

Я бы разместить свой код, но его действительно только выпадающий учебник от W3Schools с некоторыми изменениями ...

источник

2017-02-11 Katwatsu

Эти изменения могут иметь значение. Покажите нам код –

Короткий ответ:

С управлением по умолчанию <select>, это не может быть сделано. OnClickListeners не может быть прикреплен к <option> элементам.

резервного копирования ответ: Вы можете создать пользовательский DropDownList, в основном создание и укладка свой собственный 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

Создание всплывающего окна из раскрывающегося списка

ответ

Смежные вопросы