제이쿼리 - 모달 다이아로그 및 여러 알림창들

프로그래밍/jQuery 제이쿼리 2021. 11. 4.


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

h3 {
	margin: 10px;
}

.box{
	box-sizing: border-box;
	width: 600px;
	min-height: 50px;
	margin: 20px auto;
}
</style>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"/>
<style type="text/css">
.ui-state-default{
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}
.ui-state-active{
    border: 1px solid #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}

/*
.ui-icon{
	background-image: url(images/ui-icons_444444_256x240.png);	
}
.ui-state-active .ui-icon{
	background-image: url(images/ui-icons_ffffff_256x240.png);
}
*/
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.8/i18n/jquery.ui.datepicker-ko.js"></script>

<script type="text/javascript">
$(function(){
	// $("#accordion").accordion();
	
	// 처음에는 아무것도 활성화 되지 않게 함.
	$("#accordion").accordion({active:false, collapsible:true});
});

</script>

</head>
<body>

<h3>accordion 예제</h3>

<div class="box">
	<div id="accordion">
		<h3>자바란 ?</h3>
		<div>
			자바는 ...
		</div>
		<h3>CSS 란 ?</h3>
		<div>
			CSS 는 ...
		</div>
		<h3>HTML 이란 ?</h3>
		<div>
			HTML은 ...
		</div>
		<h3>javascript 란 ?</h3>
		<div>
			javascript는 ...
		</div>
	</div>
</div>

</body>
</html>


  
    
    
    
    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

h3 {
	margin: 10px;
}

.box{
	box-sizing: border-box;
	width: 600px;
	min-height: 50px;
	margin: 20px auto;
}
</style>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.8/i18n/jquery.ui.datepicker-ko.js"></script>

<script type="text/javascript">
$(function(){
	// $("#date1").datepicker(); // 미국식
	
	
	$("#date1").datepicker({
		showMonthAfterYear: true
	});
	

});

$(function(){
	$("#date2").datepicker({
		showMonthAfterYear: true,
		defaultDate: "2021-11-05",
		// minDate: "2021-11-01", maxDate: "2021-11-10"
		minDate:0, maxDate: "+5D"
	});
});

$(function(){
	$("#date3").datepicker({
		showMonthAfterYear: true,
		showOn: "button",
		buttonImage: "calendar.gif",
		buttonImageOnly: true,
		
		monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
		// , monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
	});
});
</script>

</head>
<body>

<h3>datepicker 예제</h3>

<div class="box">
	<p><input type="text" readonly="readonly" id="date1"></p>
	<p><input type="text" readonly="readonly" id="date2"></p>
	<p><input type="text" style="margin-right: 3px;" readonly="readonly" id="date3"></p>
</div>

</body>
</html>

데이트피커의 경우 옵션을 주지 않으면 미국식으로 나오기 때문에

따로 옵션을 줘야한다.


  
    
    
    
    
  
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

.btn {
    color:#333;
    font-weight:500;
    border:1px solid #ccc;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    padding:3px 10px 5px;
    border-radius:4px;
}
.btn:active, .btn:focus, .btn:hover {
	 background-color:#e6e6e6;
	 border-color: #adadad;
	 color: #333;
}
.boxTF {
    border:1px solid #999;
    padding:4px 5px 5px;
    border-radius:4px;
    background-color:#fff;
}

h3 {
	margin: 10px;
}

p {
	margin-bottom: 5px;
}
</style>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"/>
<style type="text/css">
/* 모달대화상자 */
.ui-widget-header { /* 타이틀바 */
	background: none;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
}
.ui-dialog .ui-dialog-title {
	padding-top: 5px; padding-bottom: 5px;
}
.ui-widget-content { /* 내용 */
   /* border: none; */
   border-color: #ccc; 
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.8/i18n/jquery.ui.datepicker-ko.js"></script>

<script type="text/javascript">
$(function(){
	$(".btn1").click(function(){
		$(".popup-dialog").dialog();
	});

	$(".btn2").click(function(){
		$(".search-dialog").dialog({
			title:"데이터 검색",
			width:500,
			height:500
		});
	});

	$(".btn3").click(function(){
		$(".zip-dialog").dialog({
			title:"우편번호",
			modal:true,
			width:500,
			height:300
		});
	});
	
	$(".btn4").click(function(){
		$(".modal-dialog").dialog({
			title:"대화상자",
			modal:true,
			open:function(){
				$(this).load("dialogContent.jsp");
				// $(this).load("${pageContext.request.contextPath}/bbs/list.do")
			},
			width:800,
			height:500
		});
	});
});

$(function(){
	$(".btn5").click(function(){
		$(".modal-dialog2").dialog({
			title:"예제",
			width:500,
			height:350,
			modal:true
		});
	});
	
	$(".dialog-close").click(function(){
		$(".modal-dialog2").dialog("close");
	});
});

$(function(){
	$(".btn6").click(function(){
		$(".modal-dialog3").dialog({
			title:"예제",
			width:500,
			height:"auto",
			modal:true,
			open:function(){
				$(this).parents(".ui-dialog:first").
					find(".ui-dialog-titlebar").remove(); // 타이틀바 없애기
			},
			// show:"clip", hide:"clip",
			show:"blind", hide:"explode",
			buttons : {
				"확인":function(){
					alert("확인 버튼을 눌렀습니다.");
				},
				"취소":function(){
					$(this).dialog("close");
				}
			}
			
		});
	});
});

</script>

</head>
<body>

<h3>대화상자 예제</h3>

<div style="margin: 20px;">
	<button type="button" class="btn btn1">간단한 대화상자</button>
	<button type="button" class="btn btn2">모딜리스 대화상자</button>
	<button type="button" class="btn btn3">우편번호-모달 대화상자</button>
	<button type="button" class="btn btn4">모달 대화상자-AJAX</button>
	<button type="button" class="btn btn5">모달 대화상자-CLOSE</button>
	<button type="button" class="btn btn6">모달 대화상자-CSS 변경</button>
</div>
<hr>

<div class="popup-dialog" style="display: none;">
    <h3>간단한 대화상자</h3>
    <p>대화상자 입니다.</p>
</div>

<div class="search-dialog" style="display: none;">
    <h3>검색</h3>
    <p><input type="text"></p>
</div>

<div class="zip-dialog" style="display: none;">
    <h3>우편번호</h3>
    <p>동이름 : <input type="text"></p>
</div>

<div class="modal-dialog" style="display: none;"></div>

<div class="modal-dialog2" style="display: none;">
    <h3>대화상자</h3>
    <p><input type="text"></p>
    <p>
    	<button type="button" class="btn">확인</button>
    	<button type="button" class="btn dialog-close">취소</button>
    </p>
</div>

<div class="modal-dialog3" style="display: none;">
    <h3>대화상자</h3>
    <p>대화상자 입니다.</p>
</div>

</body>
</html>


  
    
    
    
    
  
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

.btn {
    color:#333;
    font-weight:500;
    border:1px solid #ccc;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    padding:3px 10px 5px;
    border-radius:4px;
}
.btn:active, .btn:focus, .btn:hover {
	 background-color:#e6e6e6;
	 border-color: #adadad;
	 color: #333;
}
.boxTF {
    border:1px solid #999;
    padding:4px 5px 5px;
    border-radius:4px;
    background-color:#fff;
}

h3 {
	margin: 10px;
}

.box{
	box-sizing: border-box;
	width: 600px;
	min-height: 50px;
	margin: 20px auto;
}
</style>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"/>
<style type="text/css">
/* 대화상자 외부 스타일 */
.ui-widget-overlay {
	background: none;
	/* 
        background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; 
        opacity: .50;
        filter:Alpha(Opacity=50);
   */
	background: #CEFBC9;
}

/* 타이틀바 스타일*/
.ui-widget-header {
	background: none;
	/*background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;*/
	border: 1px solid #FF5E00;
	background: #DAD9FF;
}

/* 대화상자 스타일*/
.ui-dialog {
	border: 1px solid #FF5E00;
}
.ui-dialog .ui-dialog-title {
	padding-top: 5px; padding-bottom: 5px;
}

/* 대화상자 내부 스타일 */
.ui-widget-content {
	background: #F6F6F6;
	/* background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;*/ 
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.8/i18n/jquery.ui.datepicker-ko.js"></script>

<script type="text/javascript">
$(function(){
	$(".btnDialog").click(function(){
		$(".modal-dialog").dialog({
			title:"대화상자",
			model:true,
			width:500, height:500
		});
	});
});

</script>
</head>
<body>

<h3>대화상자 예제</h3>

<div style="margin: 20px;">
	<button type="button" class="btn btnDialog">대화상자</button>
</div>
<hr>

<div class="modal-dialog" style="display: none;">
	<h3>대화상자</h3>
	<p>간단한 대화상자 입니다.</p>
</div>

</body>
</html>

모달 다이어로그에 색상 부여 및 타이틀바 제거


  
    
    
    
    
  
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

.btn {
    color:#333;
    font-weight:500;
    border:1px solid #ccc;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    padding:3px 10px 5px;
    border-radius:4px;
}
.btn:active, .btn:focus, .btn:hover {
	 background-color:#e6e6e6;
	 border-color: #adadad;
	 color: #333;
}
.boxTF {
    border:1px solid #999;
    padding:4px 5px 5px;
    border-radius:4px;
    background-color:#fff;
}

h3 {
	margin: 10px;
}

.box{
	box-sizing: border-box;
	width: 700px;
	min-height: 70px;
	margin: 20px auto;
}

</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"/>

<style type="text/css">
.ui-widget-header {
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333;
    font-weight: bold;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.8/i18n/jquery.ui.datepicker-ko.js"></script>
<script type="text/javascript">
$(function(){
	$("#tab-container").tabs();
});

</script>

</head>
<body>

<div class="box" id="tab-container">
	<ul>
		<li><a href="#tabs-1"><span>첫번째</span></a></li>
		<li><a href="#tabs-2"><span>두번째</span></a></li>
		<li><a href="#tabs-3"><span>세번째</span></a></li>
	</ul>
	<div id="tabs-1">테스트 1</div>
	<div id="tabs-2">테스트 2</div>
	<div id="tabs-3">테스트 3</div>
</div>

</body>
</html>

저작자표시

'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

ajax - 간단하게 파일 업로드 with 제이쿼리 (0)	2022.06.23
제이쿼리 - 여러 애니메이션 효과들 (0)	2021.11.01
제이쿼리 - 토글 toggle (0)	2021.11.01
제이쿼리 - 스크롤 바 다루기 (0)	2021.11.01
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기) (2)	2021.11.01

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기 포스트

최근 댓글

ABOUT ME

'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역