Page 1 of 1
On Page Pop up window
Posted: Tue Jun 14, 2016 11:48 am
by Agalassi1792
Hello,
Is there a way to create an On-Page popup that pops onto the screen when someone visits a page? I don't want it on every page of this client's website, only their service pages. Is that possible to do?
Re: On Page Pop up window
Posted: Tue Jun 14, 2016 2:19 pm
by Paige
You are able to do this using a Bootstrap modal. Here is the documentation on it:
http://getbootstrap.com/javascript/#modals
Here is example code that would pop open the modal when the page loads:
Code: Select all
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>Body Text</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
</div>
</div>
Re: On Page Pop up window
Posted: Tue Jun 14, 2016 2:29 pm
by Agalassi1792
Thanks! This helps!!
Re: On Page Pop up window
Posted: Fri May 01, 2020 3:45 pm
by NoahBaldwin
Looks like Bootstrap changed their method for displaying the modal.
Here's the new HTML:
Code: Select all
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4></div>
<div class="modal-body">
<h3 style="text-align: center;"><img src="/content/uploads/bubbles.png">Get on my VIP list!</h3>
<p style="text-align: center;">Receive monthly tips and tricks that can help you market your biz!</p>
<p> </p>
<p style="text-align: center;"><a class="btn btn-primary" href="#">Join the VIP List!</a></p>
</div>
<div class="modal-footer"><a class="btn" href="#">Close</a></div>
</div>
</div>
</div>