JSFiddle - React, Tailwind, and code Playground
by ktstowell
HTML
<input type="button" id="modal-btn" value="launch modal">
<div id="epic-modal-content" style="display:none">
<header>
<h1>HAI! I iz an modalz!</h1>
</header>
<p>modal modal modal modal modal</p>
</div>CSS
/**********************************************************************************************************************************************************
* HELP WRAPPER - This is the main body that houses all of your modal content.
*********************************************************************************************************************************************************/
.epic-modal-wrapper {
display: none;
width: 600px;
height:auto;
background: white;
padding: 15px;
position: fixed;
z-index: 1200;
}
/**********************************************************************************************************************************************************
* HELP HEADER - If you want your modal to have some type of header: *
*********************************************************************************************************************************************************/
.epic-modal-wrapper header {
color: white;
background-color: #a89a8a;
height: 32px;
padding:4px;
}
/*--------------------------------------------------------------------------------------------
If you decide to use a div as your header, make it the first child of the modal wrapper
/*------------------------------------------------------------------------------------------*/
.epic-modal-wrapper>div{
color: white;
background-color: #a89a8a;
height: 32px;
padding:4px;
}
/**
* If you 'opt-int' for the close button - this styling will apply.
*/
.epic-modal-wrapper header span.close,
.epic-modal-wrapper>div span.close{
/*----------------------------------------------------------------------------------------
Default close button provided. Change...JavaScript
/* Javascript document
*
* @Author: Ken Stowell
* @Date:
*
* @Description: tooltip modal plugin
*
* @Usage: following the following markup structure is highly recommended
*
* <section> //wrapper
* <header> // epicModal header
* </header>
* <section> //epicModal body
* </section>
* </section>
*
* The plugin will inject all the necessary class names it needs to maintain styling.
* The plugin is free of any indentifying dependencies. This means, however, that you have to
* specify what element the plugin gets called on. For example, to invoke the plugin:
*
* <script>
* (function(){
* $('.whatever-i-called-the-element-i-want-to-be-an-epic-MODAL-popup').epicModal();
* })();
* </script>
*
*
*
*
*/
/**********************************************************************************************************************************************************
* GLOBAL VARS/FUNCTIONS *
*********************************************************************************************************************************************************/
$(document).ready(function() {
$('#epic-modal-content').epicModal({trigger: $('#modal-btn')});
});
/**********************************************************************************************************************************************************
* EPIC MODAL
...