On Page Pop up window

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 491
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

On Page Pop up window

Post 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?
User avatar
Paige
Support Team
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

Post 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>
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 491
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: On Page Pop up window

Post by Agalassi1792 »

Thanks! This helps!!
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 103
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: On Page Pop up window

Post 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">&times;</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>&nbsp;</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>
Post Reply