RichoSoft Squared - Ultimate Web Design
Tips and Tricks

Tips & Tricks

Here you will find FREE Tips and Tricks to help you get the most out of Mobirise

More items will be added soon....

Modal Pop-Up on Page Load 

Here are details on how to add a Modal Pop-up on page load to a Mobirise Page. You will need the Mobirise Code Editor.

Download PDF and Sample Code


1. On the page you want the pop-up to appear when loaded select one of the blocks on the page and open the Code Editor, then look for the </section> tag.
2. Insert the code below (this code is in the attached text file to make it easier to copy) by copying it and pasting it just before the </section> tag you just found.


<div id="popup" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:670px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">POP UP TITLE!</h4>
    <button type="button" style="text-align:right;" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="text-align:center;">
<h1 style="text-align:center;font-weight:700;font-size:18px;">POP UP CONTENTS!<br>Your text here<br>
for the message in the popup..</h1><br>
<h2 style="text-align:center;font-size:18px;">More Message.</h2><br> 
</div>
<div class="modal-footer">
<button style="vertical-align:middle;" type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>

Replace the text in bold with your content for the pop-up. This is HTML so can include HTML for images and videos etc.

3. In the ‘End of Body’ section of the page settings add the following script:

<script type="text/javascript">
 $(window).load(function(){
   setTimeout(function(){
       $('#popup').modal('show');
   }, 2000);
});
</script>

Job Done!
Publish or Preview the page and admire your work!

Got an Idea for a Tip or Trick

Please use the form below to get in touch to suggest a tip or trick.
Fields with darker border are required fields others are optional.


You can upload up to 4 documents to attach to your message. Each must be less than 10MB and can be images (jpg,gif or png), Word Docs, Excel Spreadsheets or PDF documents.
Upload
I accept the Site Terms and Privacy Policy

RichoSoft Mobi is based in Thailand

Any income from this site is used solely to cover hosting and other associated costs 

Contacts

Email: info@richosoft.mobi