부트 스트랩 모달 대화 상자를 사용하는 경우 페이지에 대화 상자 html을 작성해야합니다. 페이지에 대화 상자가 필요한 장소가 많으면 여러 가지를 작성해야한다는 것을 의미합니다. 부트 스트랩 모달 대화 상자 메소드에 익숙하지 않으므로 간단한 캡슐화 및 확장을 만들고 사용자 정의 제목, 너비 및 높이를 추가하고 폭과 높이에 따라 중앙에 표시됩니다.
기본 속성 :
ID : "모달", // 팝업 ID
제목 : "대화", // 팝업 제목입니다
너비 : "600", // 팝트 업 창 너비, %는 당분간 지원되지 않습니다
높이 : "500", // 인기있는 창 높이는 %를 지원하지 않습니다.
배경 : true, // 폐색이 표시되는지 여부는 기본 부트 스트랩 모달 박스와 동일합니다.
키보드 : True, // ESC 키를 종료 할 수 있는지 여부는 기본 부트 스트랩 모달 박스와 동일합니다.
원격 : "", // 원격 URL로드, 원본 부트 스트랩 모달 박스처럼
Openevent : NULL, // 팝업 창이 열린 후 콜백 함수가 열립니다
CloseEvent : NULL, // 팝업 창이 닫힌 후 콜백 함수
okevent : null // 확인 버튼을 클릭하여 콜백 함수를 클릭하십시오
사용 방법 :
1. HTML 데이터-* 속성을 통해 정의하십시오
다음과 같이 코드를 복사하십시오. <a href = "#"data-remote = "test.html"data-mtitle = "modal1"data-id = "m1"data-width = "600"data-ekevent = "ok ()"> 팝업 데모 </a>
2. JS를 통해 초기화하십시오
$ ( ". mzdialog"). mzdialog ();
부적절한 장소와 버그, 여기 학습을위한 참조만이 있으며 직접 수정하고 개선 할 수 있습니다.
1. Bootstrap-Mzdialog 플러그인에는 현재 2 개의 버튼 만 있습니다. 취소 및 확인 및 사용자 정의 버튼은 아직 지원되지 않습니다. 소스 코드를 수정 하고이 기능을 추가 할 수 있습니다.
2. HTML 데이터-* 메소드 만 사용하여 정의 할 수 있습니다. JS 초기화 중에 구성 매개 변수를 지원하지 않습니다. 소스 코드를 수정 하고이 기능을 직접 확장 할 수 있습니다.
3. 체중과 높이를 사용해서는 안됩니다.
4. 여기서 콜백 함수는 "ok ()"과 같은 문자열 형식이어야합니다. 여기서 OK 함수 자체에 의해 정의 된 함수는 ();
JS 소스 코드 :
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 배경 : true, // 폐색이 표시되는지, 기본 부트 스트랩 모달 박스 키보드와 동일합니다. true, // ESC 키가 종료 될 수 있는지, 기본 부트 스트랩 모달 박스 리모컨과 동일하게 ESC 키가 출구 할 수 있는지, // 원격 URL을로드합니다. okevent : null // 확인 버튼을 클릭하여 콜백 함수}; // 동적 생성 창 var createialog = {init : function (opts) {var _self = this; // 동적 삽입 창 var d = _self.dhtml (opts); $ ( "body"). Append (d); var modal = $ ( "#"+opts.id); // 초기화 창 modal.Modal (opts); // 창 크기 위치 var h = modal.height ()-modal.find ( ". modal-header"). OuterHeight ()-modal.find ( ". modal-footer"). OuterHeight () -5; modal.css ({ 'margin-left': opts.width/2*-1, 'margin-top': opts.height/2*-1, 'top': '50%'}). find ( ". modal-body"). InnerHeight (h); modal // show show.modal ( 'show') // 창을 숨긴 후 창을 삭제합니다. if (opts.openevent) {eval (opts.openevent) // 바인딩 버튼 이벤트 (this) .Find ( ". OK"). }, dhtml : function (o) {return '<div id = "'+o.id+'"역할 = "대화"aria-labelledby = "mymodallabel"aria-hidden = "true"> <div> <버튼 유형 = "button"data-dismiss = "modal"aria-hidden = "true"> <h3 id = "myModallabel"> '+O.title+'</h3> </div> <div> <p>로드 ... </p> </div> <div> <버튼 데이터 dismiss = "modal"aria-hidden = "true"> confer </button> </div> '; }}; reture this.each (function () {$ (this) .click (function () {var opts = $ .extend ({}, defaults, {id : $ (this) .attr ( "data-id"), title : $ (this) .attr ( "data-mtitle"), width : $ (this) .attr ( "data-width"), $ (this), ") 배경 : $ (this) .attr ( "data-backdrop"), 키보드 : $ (this) .attr ( "data-keyboard"), remote : $ (this) .attr ( "data-remote"), openevent : $ (this) .attr ( "data-openevent"), closeEvent : $ (this) .attr ( "data-closeevent"), okevent : $ (this) .attr ( "data-eockvent"); }; }) (jQuery);위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.