-
Pop up in webpage on click event- javascript
How to make a pop up in webpage on click event .
<!DOCTYPE html>
<html>
<head> <title></title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<style>
body {background-color:#ddd;}
#poppy { height: 400px; width:500px; background-color:transparent;border:1px solid #f000ff;display:none; position:relative;
padding: 10px; cursor:pointer;}
#poppy img{ position:absolute;height:300px; width: auto;}
</style>
<script>
$(document).ready(function(){
setTimeout(function(){
PopUp();
},1000); // 5000 to load it after 5 seconds from page load
});
</script>
<script>
function PopUp()
{
var x = document.getElementById(‘poppy’);
var y = x.style.display;
if (y==’none’) {
document.getElementById(‘poppy’).style.display=’block’;}
else {
document.getElementById(‘poppy’).style.display=’none’;
}}
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(document).click(function(e) {
document.getElementById(‘kk’).style.color=’green’;
//alert(event.target.parent().name);
var x =e.currentTarget.parent();alert(x);
});
});
</script>
</head>
<body> <span onclick=”PopUp()” class=”btnpop”><h2>click here for pop up </h2></span>
<div id=”kk”> this is a demo contain for just testiing the text over all . it cud have been anything but thought of just
explaning you what is here.</div>
<div >
<div class=”poppy” id=”poppy”>Hello I am a pop up content . <br>
<img src=”poppy.png” alt=”poppy”> popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/>popped contain<br/> popped contain<br/>popped contain <br/> </div>
<hr />below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>below popped content <br/>
</div>
</body>
</html>
