부트스트랩 모달 상자 사용법

부트스트랩 모달 상자 사용법: 1. 데이터 속성을 통해 "data-target="#myModal"" 선택기 콘텐츠를 동시에 설정합니다. 2. js를 통해 "$('#myModal' 코드를 직접 사용합니다. ).modal(옵션)" 등

이 문서의 운영 환경: Windows 7 시스템, bootstrap3, Dell G3 컴퓨터.

bootstrap의 modal box

modal box 기능만 사용하고 싶다면 modal.js와 bootstrap의 css를 별도로 도입하면 bootstrap.js를 도입할 수 있습니다.

Usage

1. 버튼의 data-toggle='"modal" 설정, data-target="#myModal" 선택기 콘텐츠 설정 등 데이터 속성으로

2. js Code를 통해 직접 사용 $('#myModal').modal(options)

3. 모달 상자는 크게 model-head, modal-body, model-footer의 세 부분으로 구성됩니다. 주요 내용은 body, class="에 표시됩니다. close"는 닫는 모달 스타일입니다.

4. 몇 가지 일반적인 방법 $('#identifier').modal('toggle') 모달 상자 상태 전환

   $('#identifier').modal('show') 모달 상자 표시

   $( '#identifier').modal('hide') 모달 상자 숨기기

Event	Function	Usage
show.bs.modal	show 메서드 트리거를 호출한 후.	$('#myModal').on('show.bs.modal',function () {alert("Show modal box");});
shown.bs.modal	에서 Triggered를 호출 중입니다. 쇼 방법 후.	$('#myModal').on('shown.bs.modal', function () {alert("모달을 완전히 표시"); });
hide.bs.modal	on 다음 이후에 트리거됨 hide 메소드를 호출합니다.	$('#myModal').on('hide.bs.modal', function () {alert("hide modal box");});
hidden.bs.modal	에서 Triggered를 호출 중입니다. 숨기기 방법 이후.	$('#myModal').on('hidden.bs.modal', function () {alert("모달을 완전히 숨기기"); });

2단계 사용

1. 다음 세 파일을 순서대로 소개합니다

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script sype="text/JavaScript" src="./jquery.min.js"></script>
<script sype="text/JavaScript" src="../js/bootstrap.min.js"></script>

2. 페이지에 다음 코드를 복사합니다

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="标题是什么">标题是什么</h4>
            </div>
            <div class="modal-body">
                写你HTML文本
            </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 -->
</div>

간단합니다. 모달 상자에는 트리거가 필요합니다. 모달 상자 data를 트리거하는 html 요소에 다음 속성을 추가합니다. -toggle="modal" data-target="#myModal"data-toggle="modal" data-target="#myModal"

观察以下就会发现 这个data-target="#myModal"中的myModal就是模态框所在div的id

다음을 관찰하면 이 data-target="#myModal"의 myModal이 모달 상자라는 것을 알 수 있습니다. div의 ID <div class="modal fade" id="myModal" ........> <p><a href="https://www.php.cn/bootstrap/" target="_blank">(권장: "</a>bootstrap 튜토리얼 </p>》)🎜</div>

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