Issue
I'm working on make a twitter website. But I can't solve the this problem. When I want to click this button:
I expect a result like this:
Its background will look like this and it will pop a form on the screen. What should I use to solve this problem? I'm not bad with HTML DOM, but I couldn't figure out the algorithm in my head.
Solution
An other way for achieving that, would be with a modal box (div) that already exists but will only be displayed after clicking a certain button.
Here's a quick example, I've also added an overlay, which will appear behind the div. If you click on the overlay while the modal box is visible, it will disappear again.
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
Answered By - rariales
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.