uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Modal Dialog - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Modal Dialog</h3> <p>A modal dialog is a pop-window that forces the user to interact with it before they can go back to using the parent application.</p> <p>Use the following HTML code to fire it.</p> <pre class="uix-precode uix-t-l"><label>HTML</label><code><a href="javascript:void(0)" data-modal-id="modal-open-3" data-modal-close-onlybtn="false" data-modal-height="200px" data-modal-width="300px" data-modal-lightbox="true" data-modal-close-time="false">Normal</a></code> </pre> <pre class="uix-precode uix-t-l"><label>HTML</label><code><template id="modal-open-1"> <div class="uix-modal-box" role="dialog" tabindex="-1" aria-hidden="true"> 	<button type="button" class="uix-modal-box__close" data-modal-close-trigger="true"></button> 	<div class="uix-modal-box__content" role="document"> <div class="uix-modal-box__head">  </div> <div class="uix-modal-box__body"> <div role="note">  					<h2>Holy Crap!!!</h2> 					<p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p>  </div> 	</div> </div> </div> </template></code> </pre> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary" href="javascript:void(0)" data-modal-id="modal-open-1" data-modal-close-onlybtn="false">Click Here to Open Modal</a> <br> <a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary" href="javascript:void(0)" data-modal-id="modal-open-2" data-modal-close-onlybtn="false">Click Here to Open Modal (Fullscreen)</a> <br> <a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary" href="javascript:void(0)" data-modal-id="modal-open-3" data-modal-close-onlybtn="false" data-modal-height="200px" data-modal-width="300px">Click Here to Open Modal (Custom)</a> <br> </div> </div>  </div>  </section>  <template id="modal-open-1"> <div class="uix-modal-box" role="dialog" tabindex="-1" aria-hidden="true"> <button type="button" class="uix-modal-box__close" data-modal-close-trigger="true"></button> <div class="uix-modal-box__content" role="document"> <div class="uix-modal-box__head">  </div> <div class="uix-modal-box__body"> <div role="note">  <h2>Holy Crap!!!</h2> <p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p><p>p.s. Sorry for calling you a dingus earlier.</p>  </div> </div> </div> </div> </template> <template id="modal-open-2"> <div class="uix-modal-box is-fullscreen" role="dialog" tabindex="-1" aria-hidden="true"> <button type="button" class="uix-modal-box__close" data-modal-close-trigger="true"></button> <div class="uix-modal-box__content" role="document"> <div class="uix-modal-box__head">  </div> <div class="uix-modal-box__body"> <div role="note">  <h2>Holy Crap!!!</h2> <p>p.s. Sorry for calling you a dingus earlier.</p>  </div> </div> </div> </div> </template> <template id="modal-open-3"> <div class="uix-modal-box" role="dialog" tabindex="-1" aria-hidden="true"> <button type="button" class="uix-modal-box__close" data-modal-close-trigger="true"></button> <div class="uix-modal-box__content" role="document"> <div class="uix-modal-box__head">  </div> <div class="uix-modal-box__body"> <div role="note">  <h2>Holy Crap!!!</h2> <p>p.s. Sorry for calling you a dingus earlier.</p>  </div> </div> </div> </div> </template>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>Modal Dialog (Video)</h3> <p>Use the following HTML code to fire video.</p> <pre class="uix-precode uix-t-l"><label>HTML</label><code><a href="javascript:void(0);" data-video-win="true" data-video-poster="assets/videos/1920x1080/demo.jpg" data-video-mp4="assets/videos/1920x1080/demo.mp4" data-video-webm="" data-video-ogv="" data-modal-id="web-modal-1" data-modal-close-onlybtn="false">Click Here to Open Video</a> <a href="javascript:void(0)" data-video-win="true" data-video-poster="assets/videos/1920x1080/demo.jpg" data-video-mp4="" data-video-webm="" data-video-ogv="" data-modal-id="web-modal-2" data-modal-close-onlybtn="false" data-modal-lightbox="true" data-modal-close-time="false"><span data-video-iframe="true"><iframe width="560" height="315" src="https://www.youtube.com/embed/******" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></span>Video</a></code> </pre> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary" href="javascript:void(0)" data-video-win="true" data-video-poster="assets/videos/1920x1080/demo.jpg" data-video-mp4="assets/videos/1920x1080/demo.mp4" data-video-webm="" data-video-ogv="" data-modal-id="web-modal-1" data-modal-close-onlybtn="false">Click Here to Open Video</a> <br> <a class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary" href="javascript:void(0)" data-video-win="true" data-video-poster="assets/videos/1920x1080/demo.jpg" data-video-mp4="" data-video-webm="" data-video-ogv="" data-modal-id="web-modal-2" data-modal-close-onlybtn="false"><span data-video-iframe="true"><iframe width="560" height="315" src="https://www.youtube.com/embed/ckYJBMfPtBs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></span>Click Here to Open Youtube Video</a> <br> </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')