AJAX - eclipse/oracle

최성현·2023년 8월 13일
modal윈도우오픈이벤트
0

AJAX

목록 보기
8/8

Modal

버튼 클릭시 아이디 비밀번호 입력창

머리글 -> 제목 혹은 아이디 적용가능

Modal Body

입력창 -> 아이디의 비밀번호 혹은 제목의 내용 작성가능

닫기 버튼/입력 버튼 활용가능

본문

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- modal bootstrap 가져온 코드
	 title 바로 위에 있는 script태그의 주소가 링크되어 있어야한다 -->
<div class="container mt-3">
  <h3>Modal Example</h3>
  <p>Click on the button to open the modal.</p>
  
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">머리글</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        비밀번호창,아이디입력...
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
      </div>

    </div>
  </div>
</div>
</body>
</html>

Modal2

윈도우오픈

버튼 클릭시 윈도우창 오픈
-> window.open("경로","문구","창 속성(창 크기 띄울 곳 등등 설정가능)")

  • 버튼이벤트
	<button type="button" class="btn btn-success"
	id="btn1">윈도우 오픈</button>
	
	<script>
		$("#btn1").click(function(){
			
			//window.open("경로","문구","창 속성(창 크기 띄울 곳 등등 설정가능)")
			window.open("../memo/memo.html","event","width=400,height=300,left=300,top=200");
		});
	</script>

본문

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	
	<button type="button" class="btn btn-success"
	id="btn1">윈도우 오픈</button>
	
	<script>
		$("#btn1").click(function(){
			
			//window.open("경로","문구","창 속성(창 크기 띄울 곳 등등 설정가능)")
			window.open("../memo/memo.html","event","width=400,height=300,left=300,top=200");
		});
	</script>
	
<div class="container mt-3">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
		<h4 class="modal-title">아이디인증</h4>
		<input type="text" class="form-control" style="width: 120px;">
		<hr>
		<button type="button" class="btn btn-info">인증하기</button>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
</body>
</html>

Modal3

Modal body

Email 입력창
비밀번호 입력창
2가지를 넣어서 입력창으로 활용가능

본문

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class="container mt-3">
  <h3>Modal Example</h3>
  <p>Click on the button to open the modal.</p>
  
  
  
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Login
  </button>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-toggle="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form action="/action_page.php">
  		  <div class="mb-3 mt-3">
     		  <label for="email">Email:</label>
     		  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    	  </div>
   		  <div class="mb-3">
     		  <label for="pwd">Password:</label>
     		  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    	  </div>
  		  <div class="form-check mb-3">
    		  <label class="form-check-label">
        	  	<input class="form-check-input" type="checkbox" name="remember"> Remember me
      		  </label>
    	  </div>
   			  <button type="submit" class="btn btn-primary">Submit</button>
  		</form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
</body>
</html>

Modal Quiz

list 목록 출력 후 제목 클릭시 상세 내용+이미지 출력

이벤트

제목 작성자 내용 이미지 가져와서 적용

<script>
	$(function(){
		$("td.subject").click(function(){
			var img=$(this).attr("title");
			var writer=$(this).attr("wrtier");
			var title=$(this).text();
			
			$("h4.modal-title").html(title);
			$("p.photo-title").html(writer);
			$("img.photo").attr("src",img);
			$("#myModal").modal();
		})
	});
</script>
  • 리스트 결과창
  • 제목 출력 결과창

본문

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style>
	td.subject{
		cursor: pointer;
	}
</style>
<script>
	$(function(){
		$("td.subject").click(function(){
			var img=$(this).attr("title");
			var writer=$(this).attr("wrtier");
			var title=$(this).text();
			
			$("h4.modal-title").html(title);
			$("p.photo-title").html(writer);
			$("img.photo").attr("src",img);
			$("#myModal").modal();
		})
	});
</script>
</head>
<body>
	<table class="table table-bordered" style="width: 500px; margin-top: 50px;">
		<tr class="table-info">
			<th width="60">번호</th>
			<th width="250">제목</th>
			<th width="120">작성자</th>
			<th width="60">조회</th>
		</tr>
		<tr>
			<td align="center">10</td>
			<td class="subject" title="../image/b6.png" wrtier="김영준">자바스터디 모임</td>
			<td align="center">김영준</td>
			<td align="center">0</td>
		</tr>
		<tr>
			<td align="center">12</td>
			<td class="subject" title="../image/b1.png" wrtier="김영환">오늘쇼핑가실분</td>
			<td align="center">김영환</td>
			<td align="center">22</td>
		</tr>
		<tr>
			<td align="center">13</td>
			<td class="subject" title="../image/b7.png" wrtier="장순영">모임드레스코드</td>
			<td align="center">장순영</td>
			<td align="center">10</td>
		</tr>
		<tr>
			<td align="center">15</td>
			<td class="subject" title="../image/b9.png" wrtier="홍성경">오늘점심메뉴</td>
			<td align="center">홍성경</td>
			<td align="center">10</td>
		</tr>
	</table>
	<div style="width: 500px; text-align: center;">
		<ul class="pagination">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li class="active"><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
	</div>
	
	
	
	<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p class="photo-title">Some text in the modal.</p>
          <img src="" class="photo" style="width: 200px;">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

AJAX - eclipse/oracle

0개의 댓글