Bootstrap4 기본 튜토리얼

Bootstrap4 팝업 상자

팝업 상자 컨트롤러는 알림 상자와 유사하지만, 마우스 클릭 시 요소에 표시되며, 알림 상자와 달리 더 많은 내용을 표시할 수 있습니다

팝업 상자를 어떻게 만드는지

요소에 data를 추가하여-toggle="popover" 팝업 상자를 만들어 보세요

title 속성의 내용은 팝업 상자의 제목입니다, data-content 속성은 팝업 상자의 텍스트 내용을 표시합니다

<a href="#" data-toggle="popover" title="팝업 상자 제목" data-content="팝업 상자 내용">다시 클릭하세요</a>

주의: 팝업 상자는 jQuery의 초기화 코드에 작성되어야 합니다: 그런 다음 지정된 요소에서 popover() 메서드를 호출합니다

다음 예제는 문서의 어디서든 팝업 상자를 사용할 수 있습니다:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>팝업 예제</h2>
　　<a href="#" data-toggle="popover" title="팝업 상자 제목" data-content="팝업 상자 내용">다시 클릭하세요</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

테스트를 보자 ‹/›

팝업 상자의 위치를 지정합니다

기본적으로 팝업 상자는 요소의 오른쪽에 표시됩니다

data를 사용할 수 있습니다-placement 속성을 사용하여 팝업 상자 표시 방향을 설정합니다: top, bottom, left 또는 right:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>팝업 예제</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top"　data-content="Content">나를 클릭하세요</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom"　data-content="Content">나를 클릭하세요</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left"　data-content="Content">나를 클릭하세요</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right"　data-content="Content">나를 클릭하세요</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

테스트를 보자 ‹/›

버튼에서 사용:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>팝업 예제</h2>　<br><br><br><br><br><br>
	<button　type="button"　class="btn　btn-secondary"　data-container="body"　data-toggle="popover"　data-placement="top"　data-content="Vivamus　sagittis　lacus　vel　augue　laoreet　rutrum　faucibus.">
	　　Popover　on　top
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-container="body"　data-toggle="popover"　data-placement="right"　data-content="Vivamus　sagittis　lacus　vel　augue　laoreet　rutrum　faucibus.">
	　　Popover　on　right
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-container="body"　data-toggle="popover"　data-placement="bottom"　data-content="Vivamus
	sagittis　lacus　vel　augue　laoreet　rutrum　faucibus.">
	　　Popover　on　bottom
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-container="body"　data-toggle="popover"　data-placement="left"　data-content="Vivamus　sagittis　lacus　vel　augue　laoreet　rutrum　faucibus.">
	　　Popover　on　left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

테스트를 보자 ‹/›

弹出框关闭

기본적으로,弹出框在被再次点击指定元素后会关闭，你可以使用 data-trigger="focus" 속성을 설정하여 마우스 클릭 요소 외부 영역을 클릭하여弹出框을 닫을 수 있습니다：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>팝업 예제</h2>　<br>
　　<a　href="#"　title="弹出框取消"　data-toggle="popover"　data-trigger="focus"　data-content="문서의 다른 부분을 클릭하여 닫으세요">나를 클릭하세요</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

테스트를 보자 ‹/›

알림:요소에 마우스를 가져다 놓으면 표시되고 마우스를 떼면 사라지는 효과를 구현하려면 data-trigger 속성을 설정하고 값을 "hover":

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>팝업 예제</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="일부 내용">마우스를 이곳에 가져가기</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

테스트를 보자 ‹/›

Bootstrap4 스크롤 리스너 Bootstrap4 팝업