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">&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>