https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Bootstrap Modals
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위의 회원가입 창이 자식, 아래 사이트가 부모이다. modal은 부모와 자식이 함께 간다. 자식 창을 닫아야 부모 창에 접근할 수 있다.
반면 window.open은 부모 창과 자식 창이 서로 독립적인 별도의 창이다.
위에 있는 창을 닫지 않아도 아래 창에 접근할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_modal.html</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 참조 https://www.w3schools.com/bootstrap/bootstrap_modal.asp -->
<!--
- modal : 부모 창과 자식 창이 한몸으로 구성되어 있다.
- window.open() : 부모 창과 자식 창이 서로 독립적 관계이다 (팝업창)
-->
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Modal Example
'웹개발 교육 > Bootstrap' 카테고리의 다른 글
| [46일] bootstrap (10) - grid (0) | 2022.09.30 |
|---|---|
| [45일] bootstrap (9) - icon (0) | 2022.09.29 |
| [45일] bootstrap (7) - container (0) | 2022.09.29 |
| [45일] bootstrap (6) - input (0) | 2022.09.29 |
| [45일] bootstrap (5) - pagination (0) | 2022.09.29 |
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Bootstrap Modals
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위의 회원가입 창이 자식, 아래 사이트가 부모이다. modal은 부모와 자식이 함께 간다. 자식 창을 닫아야 부모 창에 접근할 수 있다.
반면 window.open은 부모 창과 자식 창이 서로 독립적인 별도의 창이다.
위에 있는 창을 닫지 않아도 아래 창에 접근할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_modal.html</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 참조 https://www.w3schools.com/bootstrap/bootstrap_modal.asp -->
<!--
- modal : 부모 창과 자식 창이 한몸으로 구성되어 있다.
- window.open() : 부모 창과 자식 창이 서로 독립적 관계이다 (팝업창)
-->
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Modal Example
'웹개발 교육 > Bootstrap' 카테고리의 다른 글
| [46일] bootstrap (10) - grid (0) | 2022.09.30 |
|---|---|
| [45일] bootstrap (9) - icon (0) | 2022.09.29 |
| [45일] bootstrap (7) - container (0) | 2022.09.29 |
| [45일] bootstrap (6) - input (0) | 2022.09.29 |
| [45일] bootstrap (5) - pagination (0) | 2022.09.29 |
