0%

### Modal Dialog

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.

Use the following HTML code to fire it.

    HTML<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>

    HTML<div class="uix-modal-box" id="modal-open-1">
    	<a href="javascript:void(0)" class="uix-modal-box__close" data-modal-close-trigger="true"></a>
    	<div class="uix-modal-box__content">
    		<div>
    			<!-- ////////  content  begin //////// -->
    					<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>
    			<!-- ////////  content  end //////// -->
    				</div>

    	</div>
    </div>

Click Here to Open Modal
Click Here to Open Modal (Fullscreen)
Click Here to Open Modal (Custom)

## Holy Crap!!!

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

p.s. Sorry for calling you a dingus earlier.

## Holy Crap!!!

p.s. Sorry for calling you a dingus earlier.

## Holy Crap!!!

p.s. Sorry for calling you a dingus earlier.

### Modal Dialog (Video)

Use the following HTML code to fire video.

    HTML<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>

Click Here to Open Video
Click Here to Open Youtube Video