팝업 창을 사용하여 웹 페이지에 짧은 메시지를 표시하는 것은 괜찮지 만 괜찮지는 않지만 괜찮습니다. 그러나 팝업은 웹 사이트의 서비스 약관과 같은 긴 정보와 관련이 없습니다. 이를 위해서는 Modal Box Modal이라는 것을 사용하고 Modal Box에 멀티 라인 텍스트 상자 Textarea를 포함해야합니다.
이것은 JavaScript 코드를 수동으로 작성하기에는 너무 어렵지만 Bootstrap으로 작성하는 것이 더 쉽습니다.
1. 기본 목표
하이퍼 링크와 버튼이있는 웹 페이지가 있습니다.
그것들을 클릭하면 아래 그림과 같이 모달 상자가 열립니다. 오른쪽 상단의 X 버튼을 클릭하고 아래 확인이 닫힙니다.
2. 생산 과정
1. 부트 스트랩을 사용해야하므로 공식 웹 사이트에서 구성 요소를 다운로드 할 수 있습니다 (링크를 열려면 클릭하십시오). 프로덕션 환경에서 사용되는 부트 스트랩 버전 (링크를 열려면 클릭). Bootstrap3은 2와 호환되지 않습니다. 개발 문서에 따라 Bootstrap3을 직접 사용하는 것이 좋습니다. 이 기사는 Bootstrap3을 기반으로합니다. 동시에 BootStrap3에서 제공하는 JavaScript 효과는 JQuery1.11에서 지원해야합니다 (링크를 열려면 클릭하십시오). 이전 브라우저 IE6에서 jQuery2 (링크를 열려면 클릭) 대신 jQuery 공식 웹 사이트에서 이전 브라우저 IE6 (링크를 열려면 클릭)과 호환되는 JQuery1.11 (링크 열기)을 다운로드 할 수 있습니다. 다운로드 후 사이트 디렉토리를 구성하십시오. Bootstrap3를 사이트 디렉토리로 직접 압축하고 JS 디렉토리에 jQuery-1.11.1.js를 배치합니다. 사이트 폴더의 구조는 다음과 같습니다.
2.이 웹 페이지의 코드는 다음과 같습니다. 다음 조각은 분석됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> modal box </title> <meta name = "Viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> </head> <body> <p> <data-toggle = "modal"data-target = "#myModal"> 서비스 계약 </a> </p> <p> <버튼 유형 = "button"data-toggle = "modal"data-target = "#mymodal"> 서비스 계약을 클릭하십시오. id = "myModal"robol = "대화"> <div> <div> <div> <버튼 유형 = "버튼"데이터-디스 아스 = "modal"> <span> x </span> </button> <h4 id = "myModallabel"> 서비스 계약 </h4> </div> <div> <p align = "Center"> <TextArea Rows = 3 readonly = "trudonly =" 효과. 본 계약의 서비스 약관에는 법적 효과가 있습니다. 본 계약의 서비스 약관에는 법적 효과가 있습니다. 본 계약의 서비스 약관에는 법적 효과가 있습니다. </textarea> </p> </div> <div> <p align = "center"> <button type = "button"data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </html>
(1) <head> 부분
<head> <!-페이지 인코딩-> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> modal box </title> <!-이 웹 페이지가 PC, 태블릿, 휴대 전화 및 기타 장치의 화면에 자동으로 적응하도록 요구합니다-<meta name = "viewport" content = "width = device-width, 초기 스케일 = 1.0, 사용자-스케일 가능 = no"> <!-이 예제는 세 가지 외부 플러그인의 지원이 필요합니다-> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/js/js/js/js/js/js. <script type = "text/javaScript"src = "js/bootstrap.js"> </script> </head>
(2) 웹 페이지에 원래 표시된 링크 및 버튼
<p> <!-data-toggle = "modal"data-target = "#myModal"은 myModal의 열린 모달 상자를 필요로합니다-> <data-toggle = "modal"data-target = "#myModal"> 서비스 계약 </a> </p> <p> <!-클래스 = "btn btn-danger"는 Bootstrap의 단추의 스타일입니다. -> <button type = "button"data-toggle = "modal"data-target = "#myModal"> 서비스 계약을 읽으려면 여기를 클릭하십시오 </button> </p>
(3) 모달 박스 부분
모달 박스의 기본 사항은 다음과 같습니다.
따라서 다음 코드가 있습니다.
<!-class = "modal fade"는 애니메이션 효과 페이드로 모달 박스를 열어야합니다. class = "modal"도 괜찮지 만 매우 갑자기 열립니다. id = "myModal"은 위의 하이퍼 링크와 버튼을 반향합니다-> <div id = "myModal"robile = "대화"> <div> <!-모달 상자 레이아웃은 모달-콘텐츠 후에 수행해야합니다. -> <div> <div> <!-이것은 모달 박스의 제목 부분이며, ×의 세미콜론과 ×가있는 전송 문자가있는 전송 문자는 본질적으로 닫히기-> <버튼 유형 = "button"data-dismiss = "modal"> <pan> </span> </button> <!-이것은 modal box의 제목입니다. <div> <!-이것은 모달 박스의 주요 부분으로, 여러 줄의 줄이있는 읽기 전용 텍스트 상자가 포함되어 있습니다. 텍스트 상자는 모달 상자의 주요 부분에 있습니다. 텍스트 상자가 없으면 괜찮지 만 콘텐츠는 한 번에 사용자에게 제공됩니다. 그렇다면 왜 창문을 팝업하지 않습니까? -> <p align = "Center"> <TextRea Rows = 3 ReadOnly = "True" /> 본 계약의 서비스 약관은 법적으로 효과적입니다. 본 계약의 서비스 약관에는 법적 효과가 있습니다. 본 계약의 서비스 약관에는 법적 효과가 있습니다. 본 계약의 서비스 약관에는 법적 효과가 있습니다. </textArea> </p> </div> <div> <!-이것은 모달 상자의 꼬리이며, 중앙 확인 버튼이 배치됩니다-> <p align = "center"> <버튼 유형 = "button"data-dismiss = "modal"> ok </div> </div> </div> </div> </div> </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.