BootStrap 모달 상자(클래식)_javascript 기술 사용에 대한 간략한 분석

BootStrap 모달 상자 개요

부트스트랩 모달은 사용자 정의 Jquery 플러그인을 사용하여 생성됩니다. 사용자 경험을 풍부하게 하기 위해 모달 창을 만들거나 사용자에게 실용적인 기능을 추가하는 데 사용할 수 있습니다. 모달에서 팝오버 및 도구 설명을 사용할 수 있습니다.

1, 부트스트랩 모달 대화 상자 및 간단한 사용

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div> 

모달 대화 상자는 버튼이나 링크를 사용하여 직접 호출할 수 있으며 간단한 사용법은 다음과 같습니다.

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a> 

또한 대화 상자를 열 때마다 양식 데이터를 지우도록 대화 상자를 활성화해야 하는 경우 다음과 같습니다.

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

위 내용은 편집자가 소개한 BootStrap 모달박스의 사용법입니다. 더 흥미로운 내용을 보시려면 Script House 웹사이트를 주목해주세요!