부트스트랩 전환 효과 사용 방법 전환 모달 상자(Modal)-JS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-03-20 14:02:20

원래의

1936명이 탐색했습니다.

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

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

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

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

$(&#39;#identifier&#39;).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)