Модальное окно
Подскажите можно ли как то подредактировать данный код, что бы модальное окно работало и в мозиле? Если нет, то как сделать так что бы в хроме работало в модальном окне, в мозиле как нибудь по другому
<div id="main"> <div id="addfirstlevel"> <div class="plus"></div> </div> <dialog id="dialog"> <div class="form"> <input id="header" maxlength="20" placeholder="Заголовок" type="text"> <input id="date" type="date"> <input id="time" type="time"> <textarea id="note-text" placeholder="Текст заметки" maxlength="44"></textarea> <button id="add">Добавить</button> </div> <p>Заметка размещена</p> <p id="fail">Проверьте<br>данные</p> </dialog> </div>
var addfirstlevel = document.getElementById('addfirstlevel');
addfirstlevel.addEventListener("click", addfirstlevelfun);
function addfirstlevelfun(){
var dialog = document.getElementById('dialog');
dialog.showModal();
var date = document.getElementById('date');
var time = document.getElementById('time');
var dateObj = new Date();
date.value = dateObj.toISOString().slice(0,10)
time.value = dateObj.getHours() + ':' + dateObj.getMinutes();
}
|
dialog polyfill
Sinevik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.plus:before{
content: "\2795"
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
<script>
/* https://github.com/GoogleChrome/dialog-polyfill */
window.addEventListener('DOMContentLoaded', function() {
var dialog = document.getElementById('dialog');
dialogPolyfill.registerDialog(dialog);
var addfirstlevel = document.getElementById('addfirstlevel');
addfirstlevel.addEventListener("click", addfirstlevelfun);
function addfirstlevelfun(){
dialog.showModal();
var date = document.getElementById('date');
var time = document.getElementById('time');
var dateObj = new Date();
date.value = dateObj.toISOString().slice(0,10)
time.value = dateObj.getHours() + ':' + dateObj.getMinutes();
}
});
</script>
</head>
<body>
<div id="main">
<div id="addfirstlevel">
<div class="plus"></div>
</div>
<dialog id="dialog">
<div class="form">
<input id="header" maxlength="20" placeholder="Заголовок" type="text">
<input id="date" type="date">
<input id="time" type="time">
<textarea id="note-text" placeholder="Текст заметки" maxlength="44"></textarea>
<button id="add">Добавить</button>
</div>
<p>Заметка размещена</p>
<p id="fail">Проверьте<br>данные</p>
</dialog>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:22. |