우선, Modal이란 Popup의 변형 격? 이라 생각하면 되겠다.
나는 UI 전문이 이니라 학습한 것이 아닌 느끼고, 경험하고, 생각한대로 작성한다.
통상적으로 Modal은 요즘 UI의 대세인 Bootstrap한 요소라 생각한다.
Popup보다 좀더 깔끔하다 해야 하나? 아무튼 Bootstrap을 사용하지 않고 jQuery를 이용한 Modal 생성해 보겠다.
우선 "jquery-2.1.4.js" 가 필요하다. 버전은 알아서 받고 대부분 지원하는 듯하다.
위 jQuery JS를 html(jsp)에 Import 시킨다.
요렇게
<script type="text/javascript" src="resources/jquery-2.1.4.js"></script>
스크립트
|
<!-- =====================================
Modal Functions ===================================== --> <script type="text/javascript"> function openModal(width, height, hypervisor, instance) { var top = $("#modal_back").height() / 2 - height / 2; var left = $("#modal_back").width() / 2 - width / 2;
$('#modal').css("top", top); $('#modal').css("left", left); $('#modal').css("width", width); $('#modal').css("height", height); $('#modal_back').css("display", "block");
$('#text1').val("5555555"); // document.getElementById('text1').value = "5555555";
} function closeModal() { $('#modal_back').css("display", "none"); } </script> |
스타일
|
<!-- =====================================
Modal Style ===================================== --> <style> #modal_back { position:absolute; top:0; left:0; width:100%; height:100%; display:none; background:rgba(0,0,0,0.5); } #modal { position:absolute; background:#FFF; color:#000; border-radius:6px; box-shadow:0 5px 15px rgba(0,0,0,0.5); } #modal a { color:#000; } </style> |
펑션
<BODY> <a href="javascript:openModal(300, 200)">Click</a> <div id="modal_back"> <div id="modal"> <a href="javascript:closeModal()">Close</a> </div> </div> </BODY> |
뭐 이렇게 쓰면 된다.
글 재주는 없다.. 픽션만..
위에 빨간 부분은.. 아래 링크를 참조 하기 바란다.
Ref. http://stackoverflow.com/questions/1310159/how-to-do-this-using-jquery-document-getelementbyidselectlist-value
'Skills > Web' 카테고리의 다른 글
| Cache for web (0) | 2019.10.18 |
|---|---|
| jQuery.get() (0) | 2016.01.05 |
| How to install Tomcat on CentOS 7 (0) | 2015.12.23 |
| Installing MySQL Server on CentOS (0) | 2015.09.23 |
| CentOS - Apache and PHP Install (0) | 2015.09.23 |
댓글