Bootstrap의 팝업에 대해 자세히 알아보기
- 青灯夜游앞으로
- 2021-04-15 11:14:052048검색
이 글에서는 Bootstrap의 팝업 상자에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
표면적으로 팝업 상자는 실제로 제목만 추가된 특별한 프롬프트 상자입니다. 그러나 실제로는 차이점이 있습니다.
기본 사용법
툴팁을 만들 때
그래서 가장 기본적인 사용법은 다음과 같습니다
1. title 속성 값을 통해 제목을 정의합니다. (사용자 정의 속성 src-title을 사용하여 제목을 설정할 수도 있습니다.) ) 제목의 우선순위가 높습니다
2. data-content 속성을 통해 콘텐츠를 설정하세요
3. data-toggle="popover"
4를 사용하여 트리거
$('[data-toggle="popover"]').popover();
<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
속성 매개변수
팝업 상자에서 생성 시 아래 표에 나열된 사용자 정의 속성을 HTML로 정의할 수 있습니다
[참고] 데이터 위치는 기본적으로 상단이 아닌 오른쪽에 표시됩니다
<body style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
JS 트리거
popover JS의 사용법은 툴팁과 동일합니다. 옵션 개체 메서드를 사용하여 popover() 메서드에 매개변수를 전달하는 것을 지원합니다.
$(element).popover(options);
옵션의 매개변수 개체에는 애니메이션, HTML, 배치, 선택기, 원본 제목, 제목, 트리거, 지연, 컨테이너, 템플릿
Details여기로 이동
<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover({
title:"我是标题",
content:'我是内容'
});
});
</script>
【키워드】
옵션 개체 사용 외에도 , 키워드 '표시', '숨기기', '전환', '파괴'를 사용할 수도 있습니다.
<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn4">按钮4</button>
<script>
$(function(){
$('#btn1').popover('show');//显示弹出框
$('#btn2').popover('hide');//关闭弹出框
$('#btn3').popover('toggle');//反转弹出框
$('#btn4').popover('destroy');//隐藏并销毁弹出框
});
</script>
[이벤트]
플러그인은 5가지 유형의 이벤트 구독을 지원합니다
show.bs.tooltip show方法调用之后立即触发该事件 shown.bs.tooltip 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发 hide.bs.tooltip hide方法调用之后立即触发该事件。 hidden.bs.tooltip 此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发 inserted.bs.tooltip 当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件
<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
$('#btn').popover();
$("#btn").on("show.bs.popover",function(e){
$(this).html('关闭');
}).on("hide.bs.popover",function(e){
$(this).html('打开');
})
});
</script>
프롬프트 상자 비교
1. 프롬프트 상자 툴팁의 기본 트리거 이벤트는 마우스 오버 및 포커스입니다. 팝업 상자 팝오버는 클릭
2입니다. , 팝업 상자에는 제목(제목)뿐만 아니라 내용(내용)도 설정할 수 있습니다
3. 프롬프트 상자의 툴팁은 기본적으로 상단에 표시되며, 팝업 상자 팝오버가 표시됩니다.
4 표시 템플릿이 다릅니다.
프롬프트 상자 도구 설명 템플릿:
<div> <div></div> <div></div> </div>
팝업 상자 팝오버 템플릿:
<div> <div></div> <h3></h3> <div></div> </div>
더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 교육! !
위 내용은 Bootstrap의 팝업에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!