Develop

[html/css] 모달(Modal) 창 만들기 / 띄우기 본문

웹 개발/HTML & CSS

[html/css] 모달(Modal) 창 만들기 / 띄우기

개발 기록 2024. 2. 15. 14:26

 

<body> 안에 모달창 내용 작성

<!-- 글 삭제하기 버튼 클릭시 Modal -->
<div id="deleteModal" class="modal">
	<div class="modal_content">
		<div class="modal_header">
			<h4 class="modal-title">글을 삭제 하시겠습니까?</h4>
		</div>
		<div class="modal_footer">
			<button type="button" class="modal_btn_yes" id="deleteModalYes">네</button>
			<button type="button" class="modal_btn_no" id="deleteModalNo">아니오</button>
		</div>
	</div>
	<div class="modal_layer"></div>
</div>

 

 

<style> 안에 모달창 css 작성

<style type="text/css">

/* Modal 모달 */

.modal {
	display:none;
  	position:fixed;
  	width:100%;
  	height:100%;
  	top : 0;
  	right :0;
  	bottom:0;
  	left:0;
  	z-index:1050;
}

.modal h2 {
  	margin:0;   
}

.modal_header{
  	min-height: 16.42857143px;
  	padding-bottom : 15px;
  	border-bottom: 1px solid #e5e5e5;
  	text-align: center;
}

.modal_footer{
	padding-top : 15px;
  	text-align: right;
  	border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
  	margin-bottom: 0;
  	margin-left: 5px;

}

.modal .modal_btn_no {
 	display:inline-block;
  	width:100px;
	background-color : gray;
	color: white;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent; 
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
}

.modal .modal_btn_yes{
 	display:inline-block;
  	width:100px;
	background-color: #007bff;
	color: white;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent; 
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
}


.modal .modal_content {
  	width:300px;
  	margin:100px auto;
  	padding:20px 10px;
  	background:#fff;
  	border:2px solid #666;
}

.modal .modal_layer {
  	position:fixed;
  	top:0;
  	left:0;
  	width:100%;
  	height:100%;
  	background:rgba(0, 0, 0, 0.5);
  	z-index:-1;
}   

</style>

 

 

모달창 띄우는 버튼

<input type="button" id="delete" class="btn_red" value="삭제하기">

 

 

 

버튼 클릭시 실행되는 jQuery - 모달창 띄우기

	// 삭제하기 버튼 클릭 시 Modal show
	$('#delete').click(function(){
		$('#deleteModal').css("display","block");
	}); // #delete.click

 

 

띄워진 모달창

 

 

네 버튼 클릭시 - 글 삭제 동작 실행

// 삭제 Yes
$('#deleteModalYes').click(function(){
    var bo_num = ${boRead.bo_num};
    $.ajax({
        type : "post",
        url : "/board/boDelete",
        data : {"bo_num" : bo_num},
        dataType : "JSON",
        error: function(){
            alert("글 삭제 에러");
        },
        success : function(data){
            if(data == 1){
                alert("글 삭제 성공");
                location.replace("../user/userMain");
            }else{
                alert("글 삭제 실패");
                location.reload();
            }
        } // success 끝	
    }); // ajax 끝
}); //#deleteModalYes.click

 

 

아니오 버튼 클릭시 - 모달창 닫음

// 삭제 No
$('#deleteModalNo').click(function(){
    $('#deleteModal').css("display","none");		
});

 

참고한 글

 

간단한 모달 레이어 만들기 : kuzuro

 

간단한 모달 레이어 만들기

개발자, 웹개발, PC앱개발, Java, C#, HTML/CSS, JavaScript, Spring, ASP, .NET

kuzuro.blogspot.com

 

 

형태 참고

 

모달 · 부트스트랩 (getbootstrap.com)

 

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

getbootstrap.com

 

'웹 개발 > HTML & CSS' 카테고리의 다른 글

[HTML & CSS] ul li ol 리스트의 점 , 순서 표시, 기호, 블릿 없애는 법  (0) 2024.01.15
[HTML & CSS] <ol> <ul> <li> 태그 - List 만들기  (0) 2024.01.15
'웹 개발/HTML & CSS' Related Articles more