phoenix200689,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.fixed-wrap{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #DCDCDC;
display: none;
}
.fixed-wrap._show{
display: block;
}
.modal{
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="fixed-wrap fixed-wrap__modal">
<div class="modal">
<div class="modal-container">
<div class="move-container"></div>
<input class="modal__input" type="text" placeholder="Введите название цели">
</div>
</div>
</div>
<input class="tasks__btn" type="button" value="go">
<script>
var modalWnd = (function() {
var _init = function() {
_eventListener();
};
var modal = document.querySelector(".modal");
var modalBtn = document.querySelector(".tasks__btn");
var modalOverlay = document.querySelector(".fixed-wrap");
var _eventListener = function() {
modalBtn.addEventListener("click", _initModal, false);
modalOverlay.addEventListener("click", _closeModal, false);
modal.addEventListener("click", function(event) {
event.stopPropagation()
}, false);
};
var _initModal = function() {
modalOverlay.classList.add("_show");
};
var _closeModal = function() {
modalOverlay.classList.remove("_show");
}
return {
init: _init,
close: _closeModal,
show : _initModal
};
})();
modalWnd.init();
modalWnd.show()
</script>
</body>
</html>