Bootstrap 모달 팝업 상자 예제 튜토리얼-JS 튜토리얼-php.cn

이전 단어

　 Bootstrap 프레임워크에서는 모달 팝업 상자를 총칭하여 Modal이라고 합니다. 이 팝업 효과는 대부분의 웹 사이트 상호 작용에서 볼 수 있습니다. 예를 들어, 버튼을 클릭하면 팝업 상자가 나타나며, 팝업 상자에는 파일 설명이 있을 수도 있고, 버튼 조작이 있을 수도 있고, 그림이 나타날 수도 있습니다. 이번 글에서는 부트스트랩 모달 팝업 상자

구조 분석

을 자세히 소개하겠습니다. -dialog"와 "modal-content" 스타일이 있으며, 팝업 창의 실제 내용은 "modal-content"에 배치되는데, 이는 주로 세 부분으로 구성됩니다. 일반적으로 "modal-header"로 표현되며, 주로 제목과 닫기 버튼을 포함합니다 　🙌 팝업 상자의 본문, 일반적으로 "modal-body"로 표현되는 팝업 상자의 주요 내용 　 xml 일반적으로 "modal-footer"로 표시되는 팝업 상자의 하단에는 주로 작업 버튼이 배치됩니다.

<p class="modal show"><p class="modal-dialog"><p class="modal-content"><p 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></p><p class="modal-body"><p>模态弹出窗主体内容</p></p><p class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></p></p><!-- /.modal-content --></p><!-- /.modal-dialog --></p><!-- /.modal -->

로그인 후 복사

팝업 창의 경우 모달 콘텐츠가 스타일의 핵심입니다. 주로 팝업창의 테두리, 여백, 배경색, 그림자 스타일을 설정합니다

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

로그인 후 복사

또한 modal-content의 modal-header, modal-body, modal-footer 세 부분의 스타일은 다음과 같이 설정됩니다.

.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}.modal-header .close {
  margin-top: -2px;
}.modal-title {
  margin: 0;
  line-height: 1.42857143;
}.modal-body {
  position: relative;
  padding: 15px;
}.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

로그인 후 복사

이 세 부분은 주로 일부 간격 스타일을 제어합니다. 모달 바닥글은 버튼을 배치하는 데 사용되므로 포함된 버튼도 하단에 스타일이 지정됩니다. 특정 작업(이벤트)만 모달 팝업 창 표시를 트리거할 수 있습니다. Bootstrap 프레임워크에는 두 가지 구현 방법이 있습니다

트리거링 방법을 소개하기 전에 먼저 .show 및 .fade 두 가지 방법을 설명해야 합니다. 모달 팝업 창만 표시를 실행하기 위해 기본적으로 숨겨집니다

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

로그인 후 복사

[방법 1]

　 모달 팝업 창을 선언하려면 data-toggle 및 data-라는 두 가지 필수 속성만 사용자 정의하면 됩니다. 대상(부트스트랩에 선언됨 수식 트리거 방법은 일반적으로 이러한 사용자 정의 data-xxx 속성에 의존합니다. 예를 들어 data-toggle="" 또는 data-dismiss="")

　data-toggle은 모달로 설정되어야 합니다(중국어 번역 전환)

　data-target은 CSS 선택기로 설정할 수도 있고, 일반적으로 모달 팝업창의 ID 값으로 설정할 수도 있습니다. window, 왜냐하면 ID 값은 고유한 값이기 때문입니다

.fade {opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}.show {display: block!important;
}

로그인 후 복사

【방법 2】

　 모달 팝업 창은 링크 요소에 의해 트리거될 수도 있으며, 대신 link 요소의 href 속성을 사용할 수 있습니다.

그러나

<!-- 触发模态弹出窗的元素 --><button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击</button><!-- 模态弹出窗 --><p class="modal fade" id="mymodal"><p class="modal-dialog"><p class="modal-content"><p 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></p><p class="modal-body"><p>模态弹出窗主体内容</p></p><p class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></p></p><!-- /.modal-content --></p><!-- /.modal-dialog --></p><!-- /.modal -->

Bootstrap 모달 팝업 상자 예제 튜토리얼

이전 단어

구조 분석

data-target은 CSS 선택기로 설정할 수도 있고, 일반적으로 모달 팝업창의 ID 값으로 설정할 수도 있습니다. window, 왜냐하면 ID 값은 고유한 값이기 때문입니다

2. 오른쪽의 전체화면 버튼을 클릭하세요. 전체화면 상태에서 모달 팝업창의 너비는 가변적이며, 모달 대화상자는 가로 중앙에 위치합니다.

5. 팝업이 표시될 때 -업창이 발생하면 팝업창은 위에서 아래로 점차적으로 페이지 앞쪽으로 나옵니다

JS触发

JS解析

　data-target은 CSS 선택기로 설정할 수도 있고, 일반적으로 모달 팝업창의 ID 값으로 설정할 수도 있습니다. window, 왜냐하면 ID 값은 고유한 값이기 때문입니다

　2. 오른쪽의 전체화면 버튼을 클릭하세요. 전체화면 상태에서 모달 팝업창의 너비는 가변적이며, 모달 대화상자는 가로 중앙에 위치합니다.

　5. 팝업이 표시될 때 -업창이 발생하면 팝업창은 위에서 아래로 점차적으로 페이지 앞쪽으로 나옵니다