Hello everyone i try to show some modals when the user click on the links paragraphs, they show and they close, But i think im writing to much code or rewrite code… again, so its there is any other way i can manage to just make only one function to show popup modal and to close it ? knowing that has to show different content in both, any ideas ?
thank you so much.
<!DOCTYPE html>
<head>
<title>Simple Popup Boxes</title>
</head>
<body>
<div id="popupBoxOnePosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup Box 1</h3>
<p>You are currently viewing popup box 1.</p>
<p id="closebox1">Click here</a> to close popup box one.</p>
</div>
</div>
</div>
<div id="popupBoxTwoPosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup Box 2</h3>
<p>You are currently viewing popup box 2.</p>
<p id="closebox2">Click here</a> to close popup box two.</p>
</div>
</div>
</div>
<div id="wrapper">
<p id="box1">Click here</a> to see popup box one.</p>
<p id="box2">Click here</a> to see popup box two.</p>
</div><!-- wrapper end -->
</body>
</html>
css file
#popupBoxOnePosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
#popupBoxTwoPosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
.popupBoxWrapper{
width: 550px; margin: 50px auto; text-align: left;
}
.popupBoxContent{
background-color: #FFF; padding: 15px;
}
js code
//pop1
var e = document.getElementById('popupBoxOnePosition');
var close = document.getElementById('closebox1');
document.getElementById('box1').addEventListener('click', function(){
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
});
// When the user clicks on Click here to close modal
close.onclick = function() {
e.style.display = "none";
}
//pop2 js
var elpopupBoxTwoPosition = document.getElementById('popupBoxTwoPosition');
var closeclosebox2 = document.getElementById('closebox2');
document.getElementById('box2').addEventListener('click', function(){
if(elpopupBoxTwoPosition.style.display == 'block')
elpopupBoxTwoPosition.style.display = 'none';
else
elpopupBoxTwoPosition.style.display = 'block';
});
// When the user clicks on Click here to close modal
closeclosebox2.onclick = function() {
elpopupBoxTwoPosition.style.display = "none";
}