Bootstrap 팝업 window_javascript 스킬 구현 방법 종합 분석-JS 튜토리얼-php.cn

Bootstrap 팝업 window_javascript 스킬 구현 방법 종합 분석

WBOY

풀어 주다： 2016-05-16 15:28:34

원래의

1344명이 탐색했습니다.

1. 구조 분석

Bootstrap 프레임워크의 모달 팝업 상자는 각각 "modal", "modal-dialog" 및 "modal-content" 스타일을 사용하며 팝업 창의 실제 콘텐츠는 "modal-content"에 배치됩니다. ". 메인에는 세 부분도 포함되어 있습니다.

　EMA 일반적으로 "modal-header"로 표시되는 팝업 상자의 헤더에는 제목과 닫기 버튼이 주로 포함됩니다

　xml 팝업박스의 본문은 주로 "modal-body"로 표현되며, 팝업박스의 주요 내용은

　xml 일반적으로 "modal-footer"로 표시되는 팝업 상자의 하단에는 주로 작업 버튼이 배치됩니다

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

로그인 후 복사

2. 데이터 토글 클래스는 팝업 창을 실행합니다(JS를 작성할 필요 없음)

1. 모달 팝업 창 선언, 두 가지 필수 속성(data-toggle 및 data-target)만 사용자 정의하면 됩니다.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>

로그인 후 복사

2. 데이터 매개변수 설명

데이터 토글 및 데이터 대상을 통해 모달 팝업 창을 제어하는 것 외에도 Bootstrap 프레임워크는 모달 팝업 창을 제어하기 위해 모달 팝업 상자에 대한 다른 사용자 정의 데이터 속성도 제공합니다.

3. JS 트리거 팝업창(JS를 작성해야 함)

　1. 사용자 정의 속성을 사용하여 모달 팝업 상자를 트리거하는 것 외에도 JavaScript 메소드를 통해 모달 팝업 창을 트리거할 수도 있습니다. 요소에 이벤트를 제공하여 트리거됩니다. 예를 들어 버튼에 클릭 이벤트를 제공한 다음 모달 팝업 창을 트리거합니다.

HTML:


<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

로그인 후 복사

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

로그인 후 복사

2. JavaScript를 사용하여 모달 팝업 창을 실행할 때 Bootstrap 프레임워크는 주로

을 포함한 몇 가지 설정을 제공합니다.

속성 설정:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
  keyboard:false
 });
 });
});

로그인 후 복사

매개변수 설정:

이벤트 설정:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

로그인 후 복사

4. 팝업창 크기

부트스트랩 프레임워크는 모달 팝업에 대해 다양한 크기도 제공합니다.

하나는 대형 스타일 "modal-lg".

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

로그인 후 복사

또 하나는 작은 사이즈 스타일의 "modal-sm" 입니다.

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

로그인 후 복사

위는 부트스트랩 팝업창 구현 방법에 대한 전체 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.