Модальное окно [Архив форума]

Sinevik

24.01.2018, 18:30

Подскажите можно ли как то подредактировать данный код, что бы модальное окно работало и в мозиле? Если нет, то как сделать так что бы в хроме работало в модальном окне, в мозиле как нибудь по другому

<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();
}

рони

24.01.2018, 19:30

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>