19'C 흐림
서울 강남구
ModalWindowJS is a jQuery based modal plugin for creating inline modal windows that pop up in front of other elements on the webpage.
How to use it:
1. Include the necessary JavaScript and CSS files on the webpage.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/modal-window.js"></script>
2. Insert your own modal content and a close button to the modal. Note that modal content will be hidden until triggered.
<div class="modalContent example">
<p class="closeBtn">Close</p>
<p>Modal Content Here</p>
</div>
3. Create a trigger button and specify the target modal content using the 'data-modal' attribute:
<button class="trigger" data-modal="singular">
Launch The Modal
</button>
4. Initialize the modal plugin with default settings.
$(function(){
$(document).modalWindow();
});
5. Apply your own CSS styles to the modal window.
#overLay{
position: fixed;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.modalContent {
display: none;
overflow:auto;
position: absolute;
z-index: 1000;
padding: 20px;
background:#ffffff;
color: #000000;
}
.closeBtn{
position: absolute;
top: 10px;
right: 10px;
}
6. To customize the modal window, override the following settings and then pass them to the 'modalWindow()' function.
$(document).modalWindow({
// default CSS selectors
"openTrigger": ".trigger",
"closeTrigger": ".closeBtn",
"modalContent": ".modalContent",
"overLay" : "overLay",
// width/height of the modal window
"width" : 500,
"height": 500,
// animation speed in milliseconds
"feadSpeed" : 500
});