<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<button id="myBtn" class="trigger-button" type="button">Launch Modal</button>
<!-- <div id="popup1" class="overlay pop_hiden"> -->
<div id="myModal" class="modal">
<div class="popup">
<h2>Here i am</h2>
<button class="close">×</button>
<div class="content">
<form>
<input type="text" class="email" placeholder="email">
<br />
<input type="text" class="pwd" placeholder="password">
</form>
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
visibility: hidden;
opacity: 0;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#popup1{
display: none;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 500ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px) {
.popup {
width: 70%;
}
}
.popup input {
display: block;
height: 50px;
width: 90%;
margin: 0 auto;
border: none;
}
.popup input::placeholder {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: .5s;
transition: .5s;
}
.popup input:focus,
.popup input:active:focus {
color: #ff5722;
outline: none;
border-bottom: 1px solid #ff5722;
}
.popup input:focus::placeholder,
.popup input:active:focus::placeholder {
color: #ff5722;
position: relative;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.popup .email,
.popup .pwd {
position: relative;
z-index: 1;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 20px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #858585;
font-weight: lighter;
-webkit-transition: .5s;
transition: .5s;
}
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
modal.style.display = "block";
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
