๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS/๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap

1๏ธโƒฃ 1๏ธโƒฃ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Modal ๋ชจ๋‹ฌ

by Meteora_ 2021. 2. 26.
728x90


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
  
 
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <!-- ํด๋”๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์šฉ์‹œ ์†๋„๋น ๋ฆ„ -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  
</head>
<body>

<h1 class="text-center mb-5">component:modal</h1>
<h2 class="text-center mb-4">๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ์˜ˆ</h2>

<div class="container">

	<button type="button" class="btn btn-secondary" data-toggle="modal"
		data-target="#exampleModal">์ „ํ™˜ ๋ฒ„ํŠผ</button>
	
	<!-- ๋ชจ๋‹ฌ ํ…Œ๋‘๋ฆฌ -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
	aria-labelledby="exampleModallabel" aria-hidden="true">
		<!-- ๋ชจ๋‹ฌ๋ณธ์ฒด -->
		<div class="modal-dialog" role="document">
			<!-- ๋ชจ๋‹ฌ ๋‚ด์šฉ -->
			<div class="modal-content">
				<!-- ๋ชจ๋‹ฌ ํ—ค๋” -->
				<div class="modal-header">
					<!-- ๋ชจ๋‹ฌ ์ œ๋ชฉ -->
					<h5 class="modal-title" id="exampleModallabel">๋ชจ๋‹ฌ ์ œ๋ชฉ</h5>
						<!-- ๋‹ซ๊ธฐ๋ฒ„ํŠผ -->
						<button type="button" class="close" data-dismiss="modal" aria-lable="close">
							<span aria-hidden="true">&times;</span>
						</button>
				</div>
				
				<!-- ๋ชจ๋‹ฌ ๋ณธ๋ฌธ -->
				<div class="modal-body">
					๋‚ด์šฉ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค
				</div>
				
				<!-- ๋ชจ๋‹ฌ ๊ผฌ๋ฆฌ๋ง -->
				<div class="modal-footer">
					<!-- ๋‹ซ๊ธฐ ๋ฒ„ํŠผ -->
					<button type="button" class="btn btn-secondary" data-dismiss="modal">๋‹ซ๊ธฐ</button>
				</div>
			</div>
		
		</div>
	
	</div>

</div>

</body>
</html>

๋Œ“๊ธ€