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!

Modal Pop-Up on Page Load Once Per Browser Session

Here are details on how to add a Modal Pop-up on page load to a Mobirise Page this version only loads the pop-up once per browser session and when the browser is closed and next re-opened will appear again. 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 after the </section> tag you just found.


<div id="popup" class="modal fade" role="dialog" style="z-index:99999;">
<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 scripts:

<script type="text/javascript" src="js/RSCookies-min.js"></script>
<script type="text/javascript">
var strcookie = ReadCookie("MyPopUp");
if (strcookie.length == 0) {
 $(window).load(function(){
   setTimeout(function(){
       $('#popup').modal('show');SetCookie('MyPopUp','Opened',0.001);
   }, 2000);
});
}
</script>

Upload the supplied library file (RSCookies-min.js) to a sub-folder named js in your online site.

NOTE: The pop-up will only appear once per browser session. If the browser is closed then the pop-up will appear again the next time the page is accessed. This will not work locally, only when published to your web server.

IMPORTANT! This facility writes a cookie to the visitors browser cache, so you must notify the user that you use cookies to comply with the GDPR.

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