Форум

Sinevik · #1 (**permalink**) 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();
	}

рони · #2 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript