Bootstrap 모달Dialog_javascript 기술의 간단한 사용

모달 은 상위 폼을 덮는 하위 폼입니다. 일반적으로 목적은 상위 양식을 벗어나지 않고도 상호 작용이 가능한 별도 소스의 콘텐츠를 표시하는 것입니다. 하위 양식은 정보, 상호 작용 등을 제공합니다.

이 플러그인의 기능을 별도로 참조하려면 modal.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
1. 사용법
모달 플러그인의 숨겨진 콘텐츠를 전환할 수 있습니다:
데이터 속성을 통해: 컨트롤러 요소(예: 버튼 또는 링크)에 data-toggle="modal" 속성을 설정하고 data-target="#identifier" 또는 href="#identifier"를 설정하여 특정 모드를 지정합니다. 전환할 상태 상자(id="식별자" 포함).
JavaScript를 통해: 이 기술을 사용하면 간단한 JavaScript 줄을 사용하여 id="identifier"로 모달을 호출할 수 있습니다.
$('#identifier').modal(옵션)
2. 간단한 예

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>

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

코드 복사 코드는 다음과 같습니다.

378d00b47a82a869298c1ecfc871b6cf계약 추가5db79b134e9f6b82c0b36e0489ee08ed

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

코드 복사 코드는 다음과 같습니다.

$('#modal1').modal('hide ');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}) //계약서 추가 후 양식 작업 지우기

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.