Bootstrap의 팝업에 대해 자세히 알아보기-부트스트랩 튜토리얼-php.cn

Bootstrap의 팝업에 대해 자세히 알아보기

青灯夜游

풀어 주다： 2021-04-16 08:49:30

앞으로

2088명이 탐색했습니다.

이 글에서는 Bootstrap의 팝업 상자에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Bootstrap의 팝업에 대해 자세히 알아보기

표면적으로 팝업 상자는 실제로 제목만 추가된 특별한 프롬프트 상자입니다. 그러나 실제로는 차이점이 있습니다.

기본 사용법

툴팁을 만들 때

그래서 가장 기본적인 사용법은 다음과 같습니다

1. title 속성 값을 통해 제목을 정의합니다. (사용자 정의 속성 src-title을 사용하여 제목을 설정할 수도 있습니다.) ) 제목의 우선순위가 높습니다

2. data-content 속성을 통해 콘텐츠를 설정하세요

3. data-toggle="popover"

4를 사용하여 트리거

$('[data-toggle="popover"]').popover();

로그인 후 복사

<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

로그인 후 복사

Bootstrap의 팝업에 대해 자세히 알아보기

속성 매개변수

팝업 상자에서 생성 시 아래 표에 나열된 사용자 정의 속성을 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(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

로그인 후 복사

Bootstrap의 팝업에 대해 자세히 알아보기

JS 트리거

popover JS의 사용법은 툴팁과 동일합니다. 옵션 개체 메서드를 사용하여 popover() 메서드에 매개변수를 전달하는 것을 지원합니다.

$(element).popover(options);

로그인 후 복사

옵션의 매개변수 개체에는 애니메이션, HTML, 배치, 선택기, 원본 제목, 제목, 트리거, 지연, 컨테이너, 템플릿

Details여기로 이동

<body   style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover({
        title:"我是标题",
        content:&#39;我是内容&#39;
    });
});    
</script>

로그인 후 복사

Bootstrap의 팝업에 대해 자세히 알아보기

【키워드】

옵션 개체 사용 외에도 , 키워드 '표시', '숨기기', '전환', '파괴'를 사용할 수도 있습니다.

<body   style="max-width:90%">
<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(){
    $(&#39;#btn1&#39;).popover(&#39;show&#39;);//显示弹出框
    $(&#39;#btn2&#39;).popover(&#39;hide&#39;);//关闭弹出框
    $(&#39;#btn3&#39;).popover(&#39;toggle&#39;);//反转弹出框
    $(&#39;#btn4&#39;).popover(&#39;destroy&#39;);//隐藏并销毁弹出框
});    
</script>

로그인 후 복사

Bootstrap의 팝업에 대해 자세히 알아보기

[이벤트]

플러그인은 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(){
    $(&#39;#btn&#39;).popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html(&#39;关闭&#39;);    
    }).on("hide.bs.popover",function(e){
        $(this).html(&#39;打开&#39;);
    })

});    
</script>

로그인 후 복사

Bootstrap의 팝업에 대해 자세히 알아보기

프롬프트 상자 비교

1. 프롬프트 상자 툴팁의 기본 트리거 이벤트는 마우스 오버 및 포커스입니다. 팝업 상자 팝오버는 클릭

2입니다. , 팝업 상자에는 제목(제목)뿐만 아니라 내용(내용)도 설정할 수 있습니다

3. 프롬프트 상자의 툴팁은 기본적으로 상단에 표시되며, 팝업 상자 팝오버가 표시됩니다.

4 표시 템플릿이 다릅니다.

프롬프트 상자 도구 설명 템플릿:

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

로그인 후 복사

팝업 상자 팝오버 템플릿:

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 교육! !

위 내용은 Bootstrap의 팝업에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!