2015년 4월 30일 목요일

Jquery Modal 사용

샘플예제


<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alert</title>
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/button.css'/>">
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/jquery.alerts.css'/>">
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/jquery-ui.css'/>">
<script type="text/javascript" src="<c:url value='/resources/js/jquery.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-migrate-1.2.1.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.alerts.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.blockUI.js'/>"></script>

<script type="text/javaScript" language="javascript">

$(document).ready(function() {

  dialog = $( "#dialog-form" ).dialog({
     autoOpen: false,
     height: 300,
     width: 350,
     modal: true,
         buttons: {
             "저장": function() {
              //구현
             
                $( this ).dialog( "close" );
             },
             "취소": function() {
                $( this ).dialog( "close" );
             }
           }
   });

//modal
$("#btn_modal").click( function() {
dialog.dialog( "open" );
});

});

</script>
</head>

<body>
<!--  모달시작 -->
  <div id="dialog-form" title="Create new user">
<p>모달 테스트입니다.</p>
<p>모달 테스트입니다.</p>
<p>모달 테스트입니다.</p>
<p>모달 테스트입니다.</p>
<p>모달 테스트입니다.</p>
</div>
<!-- 모달종료 -->

</body>
</html>

댓글 1개:

  1. The Casino Resort and Spa - Mapyro
    A complete casino 구미 출장마사지 resort 화성 출장마사지 and spa map and 구리 출장샵 hotel with information on rooms, restaurants, spa tubs, conference facilities, gaming tables, 부천 출장마사지 golf 동해 출장마사지 course,

    답글삭제