Spanish

 Shadowbox on page load Example

On load, this page will show a Shadowbox with some HTML.

Dewey,
What information or HTML do you want in the popup Shadowbox?
Also, I assume ONLY you want the Shadowbox popup to appear on the Homepage.

The actual Shadowbox is in the Modal below. We would hide the Module Header, button, etc.
We can easily control the Shadowbox by setting Security Permissions on the Module to display for Everyone or only Administrators.
We can also set the Shadowbox Module to only display during a specific time period. November 2016 through April 2017 for example.

Send me an E-Mail with the HTML content you want in the Shadowbox ... or a link to a page you want in the Shadowbox.
Don

 Popup Shadowbox example



Be careful when editing this module. A syntax error can destroy the Module!
It's probably best to NOT edit the Module at all.

There is a hidden Module on this page called Homepage Shadowbox". It is the same Module that is on the Strong Marriages Homepage.
Click on the HTML or Edit buttons below to modify the Homepage Shadowbox

Backup copy of the HTML

<!-- Automatically launch the HomePageShadowbox -->
<script>
    $(window).load(function(){
        $('#HomepageShadowboxModal').modal('show');
    });
</script>

<!-- Modal Shadowbox -->
<div tabindex="-1" class="modal fade" id="HomepageShadowboxModal" role="dialog" aria-labelledby="HomepageShadowbox">
  <div class="modal-dialog" role="document"  style="width:96%;height:300px;max-width:850px;top:100px;">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true">×</span></button>
        <center>
            <h4 class="modal-title" id="myModalLabel">Strong Marriages    
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              Our Mission is Your Marriage
            </h4>
        </center>
      </div>
      <div class="modal-body">
          <a href="/Give.aspx"  target="_blank">
     <img width="100%" src="/Sites/StrongMarriages/Images/YEA 2017/2017-YE-Shadowbox.png">
    </a>
      </div>
      <div class="modal-footer">
        <a class="btn btn-primary btn-sm" type="button" href="/Give.aspx"  target="_blank">Give Now</a>
        <button class="btn btn-default btn-sm" type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>