SOW : Ajax Modals

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.ajax_modal.js

Overview:

load modal content via ajax
callback support
lightweight, 3Kb minified (1.6Kb gzipped)

Ajax modal Basic

Preview
HTML

                  
                    <!-- 

                      Required class
                      .js-ajax-modal 

                      Attributes
                      data-href="_ajax/modal_signin.html" (instead of href, to avoid "open in new tab")
                      data-ajax-modal-size="modal-sm|modal-md"modal-lg|modal-xl|modal-full" 
                      data-ajax-modal-centered="true|false" 
                      data-ajax-modal-callback-function="" (optional callback function)
                      data-ajax-modal-backdrop="static"

                      Note
                      data-href is always used as primary, if present.
                      Can be used both like this (so "open in new tab" display a different page):
                             href="url-to-full-page.html"
                        data-href="url-to-modal.html"

                    -->

                    <a href="#"
                      data-href="_ajax/modal_signin.html" 
                      data-ajax-modal-size="modal-md" 
                      data-ajax-modal-centered="true" 
                      data-ajax-modal-callback-function="" 
                      class="js-ajax-modal">
                        <i class="fi fi-heart-slim"></i>
                      Show modal
                    </a>

Callback function example

                  
                    <script>

                      var my_modal_callback = function( modal_id ) {

                        // modal_id is the id created by ajax!
                        // document.querySelector( modal_id )

                        alert('I am a callback!');

                      }

                    </script>

Ajax modal Video

Preview
HTML

                  
                    <!--

                      Open video on page load - add:
                      1. .js-onload class
                      2. data-ajax-modal-delay="3000"    (3000 = 3s delay)

                    -->

                    <!-- youtube -->
                    <a class="js-ajax-modal" 
                      href="https://www.youtube.com/watch?v=7j5lkPE5ikk" 
                      data-ajax-modal-type="video" 
                      data-ajax-modal-size="modal-xl" 
                      data-ajax-modal-centered="true">
                      Youtube Video
                    </a>

                    <!-- vimeo -->
                    <a class="js-ajax-modal" 
                      href="https://player.vimeo.com/video/56624256" 
                      data-ajax-modal-type="video" 
                      data-ajax-modal-size="modal-xl" 
                      data-ajax-modal-centered="true">
                      Vimeo Video
                    </a>

                    <!-- local video -->
                    <a class="js-ajax-modal" 
                      href="demo.files/video/hd0936.mp4" 
                      data-ajax-modal-type="video" 
                      data-ajax-modal-size="modal-xl" 
                      data-ajax-modal-centered="true">
                      Local Video
                    </a>

Ajax modal inline structure

Preview
HTML

Looks the same, just loaded in a different way.

                  
                    <a href="#"
                      data-href="_ajax/modal_signin.html" 
                      data-ajax-modal-container="#my_custom" 
                      data-ajax-modal-size="" 
                      data-ajax-modal-centered="true" 
                      data-ajax-modal-callback-function="" 
                      class="js-ajax-modal">
                      Load ajax modal
                    </a>
                    <small class="d-block text-muted mt-1">
                      Looks the same, just loaded in a different way.
                    </small>


                    <!-- custom structure -->
                    <div id="my_custom" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
                      <div class="modal-dialog" role="document">

                        <div class="modal-content"><!-- content added by ajax --></div>

                      </div>
                    </div>

Ajax modal open on load

Open a modal on page load - place this code anywhere, usually at the bottom of a page, inside <head> html tag.

              
                <!--

                  delay to show the modal
                  data-ajax-modal-delay="3000" (3000 = 3s)

                  do not close modal on backdrop click
                  data-ajax-modal-backdrop="static"

                -->

                <div class="hide js-onload js-ajax-modal" 
                    data-href="_ajax/modal_signin.html" 
                    data-ajax-modal-delay="3000" 
                    data-ajax-modal-size="modal-md" 
                    data-ajax-modal-centered="false" 
                    data-ajax-modal-backdrop="static"></div>