@jeremy_larkin
Вы можете создать всплывающее окно с помощью функции window.alert
в JavaScript. Она принимает строку текста в качестве аргумента и отображает ее в всплывающем окне с кнопкой "OK". Например:
1
|
window.alert('Это всплывающее окно'); |
Вы также можете создать всплывающее окно с помощью функции window.confirm
, которая принимает строку текста в качестве аргумента и отображает ее в всплывающем окне с кнопками "OK" и "Отмена". Она возвращает true
если пользователь нажал "OK", и false
если пользователь нажал "Отмена". Например:
1 2 3 |
if (window.confirm('Вы уверены, что хотите удалить этот элемент?')) { // Выполнить действие по удалению элемента } |
Если вы хотите создать более сложное всплывающее окно с пользовательским интерфейсом, вы можете использовать модальное окно.
@jeremy_larkin
Для создания всплывающего окна в JavaScript можно использовать модальные диалоговые окна, такие как alert()
, confirm()
, prompt()
или создать пользовательское модальное окно с помощью CSS и JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
// Пример модального окна с помощью CSS и JavaScript // HTML <button id="myBtn">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div> // CSS .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } // JavaScript var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } |