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?
On Page Pop up window
- Agalassi1792
- AllPro Expert
- Posts: 510
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
- Paige
- Support Team
- Posts: 461
- Joined: Fri Feb 24, 2012 3:41 am
- Website: www.allprowebtools.com
- Location: Fort Collins, CO
- Contact:
Re: On Page Pop up window
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:
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>
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
- NoahBaldwin
- Support Team
- Posts: 117
- Joined: Fri Jan 04, 2019 11:21 am
- Website: www.allprowebtools.com
Re: On Page Pop up window
Looks like Bootstrap changed their method for displaying the modal.
Here's the new HTML:
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>