제이쿼리 - 모달 다이아로그 및 여러 알림창들 > HTML/CSS/기타 - 이음

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

관리자
0
2,948
0
0
Print
글주소
12-21

Link
https://heidong.tistory.com/m/1453

Insert title here

<!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>

0
0

목록 이전글 다음글

HTML/CSS/기타

번호	제목	글쓴이	날짜	조회수
47	스마트에디터 반응형 CSS 추가	관리자	12-13	33
46	JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정	관리자	09-02	2,910
45	web chart - 실시간 차트	관리자	07-25	2,880
44	비동기 프로그래밍	관리자	07-25	2,829
43	table thead 고정과 tbody 스크롤	관리자	07-23	2,888
42	datepicker 사용하여 공휴일 직접 지정하기	관리자	06-11	2,943
41	Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리	관리자	03-06	3,111
40	JSPDF 사용법(Javascript pdf)	관리자	03-04	3,454
39	FullCalendar(풀캘린더) 어거지 사용법	관리자	01-25	3,296
38	JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${}	관리자	12-28	3,123
37	[CSS] 가로 스크롤 구현하기	관리자	12-27	3,280
36	JCROP을 이용한 업로드한 크롭( CROP ) 하기	관리자	12-27	3,245
35	제이쿼리 - 모달 다이아로그 및 여러 알림창들	관리자	12-21	2,949
34	Javascript/jQuery 이미지 회전 돋보기	관리자	11-07	3,349
33	Resolving the Issue of Fakepath in JavaScript	관리자	10-26	2,996
32	div 및 요소 화면 중앙에 위치시키기	관리자	10-21	3,016
31	[Jquery] 체크박스 전체 체크 , 해제 하는 방법	관리자	10-19	3,052
30	display 스타일 속성 사용하여 행 숨기기/보이기	관리자	09-16	3,436
29	자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리	관리자	09-14	3,559
28	div 2개 나란히 정렬하는 방법	관리자	09-09	3,241

목록