This code will show and hide a popup
<html>
<head>
<style>
#pop {
height: 200px;
width: 200px;
position: fixed;
bottom: 50%;
right: 50%;
border: 2px solid;
padding: 10px;
background: white;
display: none;
}
#buttonsOnPop {
position: absolute;
right: 0;
bottom: 0;
margin: 5px;
}
#popTitle {
vertical-align: top;
text-align: center;
width: 100%;
background-color: limegreen;
}
</style>
<script>
function closePopYes() {
alert("yes");
}
function closePopNo() {
document.getElementById("pop").style.display='none';
}
function showPop() {
var text = "<p>To be or not to be</p><p>Revente</p>";
var popContent = document.getElementById("popContent");
popContent.innerHTML = text;
document.getElementById("pop").style.display='block';
}
</script>
</head>
<body>
<div id="pop">
<div id="popTitle">Pop Window</div>
<div id="popContent">
</div>
<div id="buttonsOnPop">
<button id="yes" onclick="closePopYes();">Yes</button>
<button id="no" onclick="closePopNo();">No</button>
</div>
</div>
<button id="showPop" onclick="showPop()">Show Pop</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae iaculis enim.
Vivamus a tellus sit amet tortor mattis auctor at eget purus. Fusce condimentum semper
varius. Integer ultricies enim et ipsum scelerisque, dignissim ultricies metus molestie.
Quisque rutrum, sem id vehicula malesuada, orci purus malesuada dolor, id vehicula nulla
nisi sed dui. Donec at eros vestibulum, euismod mi quis, rhoncus justo. Curabitur quis
metus sit amet erat efficitur pellentesque. Nunc dui massa, efficitur ac dapibus ut,
interdum vel metus. Nunc mattis eleifend nisl, id rhoncus erat cursus et. Nullam semper,
risus sed feugiat elementum, turpis lacus egestas nisi, quis bibendum lorem turpis eu
purus. Etiam nec lorem tristique, condimentum ligula ac, mattis erat. Proin aliquet
quis lectus eu hendrerit. Curabitur vitae laoreet nulla. Pellentesque imperdiet odio id
urna imperdiet bibendum eget non erat.
</p>
</body>
</html>
No comments:
Post a Comment