BootStrap 모델 팝업 box_javascript 기술 사용 소개

앞서 부트스트랩 탭 사용법에 대해 설명드렸습니다. 오늘은 부트스트랩에서 모델 팝업창 사용법에 대해 알아보겠습니다.

효과:

코드:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="Modal-header">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

아주 간단합니다.

참고: data-target 속성은 모델의 ID를 가리키므로 버튼을 클릭하면 모델이 팝업됩니다.

물론 js를 사용하여 제어할 수도 있습니다.

다음 코드:

표시: $('#myModal').modal('show');

숨기기: $('#myModal').modal('hide');

스위치: $('#myModal').modal('toogle');

이벤트: $('#myModal').on('hidden', function () {// 뭔가를 하세요…});

참고: 여기서는 모델이 원격 URL로 이동하도록 하기 위해 href 속성을 사용했습니다. 물론, Model-Body에 원하는 내용을 직접 작성할 수도 있습니다.

모델의 div 구조를 잘 살펴보면 model-body가 콘텐츠를 나타내고, model-header가 헤더를 나타낸다는 것을 알 수 있습니다. 하단에 두 개의 버튼을 추가하려면 다음을 사용해야 합니다. 암호.

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

참고: 모델의 너비를 설정하려면 레이아웃을 추가해야 합니다. 아래 코드 블록에 모델을 넣고 모델의 너비를 설정하면 됩니다. style="width:500px" 그런데, 스팬 스타일을 사용하여 클래스에 직접 넣을 수는 없습니다. .

<div class="container"></div>

위는 편집자가 소개한 BootStrap 모델 팝업 상자의 사용법입니다. 모두에게 도움이 되었으면 좋겠습니다!