>  기사  >  웹 프론트엔드  >  부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)

부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)

高洛峰
高洛峰원래의
2017-03-20 14:02:201903검색

이 글에서는 부트스트랩 전환 효과전환 모달박스(Modal)를 주로 소개하는데, 매우 좋고 참고할만한 가치가 있는 친구들이 참고하면 됩니다

모달 플러그인의 숨겨진 콘텐츠를 전환할 수 있습니다:

1. 데이터 속성을 통해: controller 요소(예: button 또는 링크) data-toggle="modal" 속성을 ​​설정하고 data-target="#identifier" 또는 href="#identifier" rel="external nofollow"을 설정하여 전환할 특정 모달 상자를 지정합니다(id="identifier" 사용)

2. Javascript : 이 기술을 사용하면 간단한 Javascript 라인으로 id="identifier"로 모달을 호출할 수 있습니다.

$('#identifier').modal(options)
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Bootstrap-模态框Modal</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
  </head> 
  <body> 
  <p class="container"> 
    <h2>创建模态框(Modal)</h2> 
    <!-- 按钮触发模态框 --> 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> 
    <!-- 模态框(Modal) --> 
    <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <p class="modal-dialog"> 
        <p class="modal-content"> 
          <p class="modal-header"> 
            <button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button> 
            <h4 class="modal-title" id="myModalLabel"> 模态框(Modal)标题 </h4> 
          </p> 
          <p class="modal-body"> 
            在这里添加一些文本 
          </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 --> 
    </p> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)

참고 :

aria-labelledby="myModalLabel" aria-hidden="true"

공식 API는 시각 장애인에 대한 역할 설정이나 읽을 수 있는 일부 장치가 팝업 상자임을 장치에 알리는 것을 의미합니다. aria-labelledby=".." 그 안에는 설명 정보가 있는데, aria-hidden="true"로 숨겨두는 경우가 대부분입니다. 이렇게 작성하는 것이 더 표준입니다

모달 상자의 접근성을 높입니다.

모달 상자의 제목 표시줄을 가리키도록 role="dialog"aria-labelledby="..." 속성을 ​​.modal에 추가해야 합니다. aria-hidden="true" 속성을 ​​.modal-dialog에 추가하세요.

또한 aria-describedby 속성을 통해 모달 상자 .modal에 설명 정보를 추가해야 합니다.

렌더링

부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)

관련 글:

Bootstrap의 기본 레이아웃 구현 방법에 대한 자세한 설명

BootStrap 테이블 사용법 분석

JS 컴포넌트 Bootstrap Table 테이블 행 드래그 효과 구현 코드

위 내용은 부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.