이전에는 부트 스트랩 탭의 사용에 대해 설명했습니다. 오늘 우리는 부트 스트랩에서 모델 팝업 창의 사용에 대해 배울 것입니다.
효과:
암호:
<input id = "btntext"type = "button"value = "텍스트 추가"data-toggle = "modal"data-target = "#mymodal"href = "../ sysmanage/zujianmanage.aspx"/> <!-modal-> <div id = "myModal"tabindex = ""roleag ""Divid> <div> <div> <div> <div> <div> <div> <div> data-dismiss = "modal"> × </button> <h3 id = "mymodallabel"> 모달 헤더 </h3> </div> <div> </div>
매우 간단합니다. 그게 전부입니다.
참고 : 데이터 표적 속성이 모델의 ID를 가리키므로 버튼을 클릭하면 모델이 나타납니다.
물론 JS를 사용하여 제어 할 수도 있습니다.
다음 코드 :
쇼 : $ ( '#myModal'). Modal ( 'show');
숨기기 : $ ( '#myModal'). modal ( 'hide');
스위치 : $ ( '#myModal'). modal ( 'toogle');
이벤트 : $ ( '#myModal'). on ( 'hidden', function () {// 뭔가…});
참고 : 여기서는 HREF 속성을 사용하여 모델을 원격 URL로 만들 수 있습니다. 물론 원하는 것을 모델 몸에 직접 쓸 수 있습니다.
모델의 DIV 구조를주의 깊게 살펴보면 Model-Body가 컨텐츠를 나타내고 Model-Header가 헤더라는 것을 이해합니다. 따라서 하단에 두 개의 버튼을 추가하려면 다음 코드를 사용해야합니다.
<div> <a href = "#"> Close </a> <a href = "#"> 저장 </a> </div>
참고 : 모델의 너비를 설정하려면 레이아웃을 추가해야합니다. 모델을 아래 코드 블록에 배치하고 모델의 너비를 설정하는 것입니다. 스타일 = "너비 : 500px". 그건 그렇고, 당신은 스팬 스타일을 사용하여 클래스에 넣을 수 없습니다. .
<div> </div>
위는 편집자가 소개 한 부트 스트랩 모델 팝업 박스를 사용하는 것입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!