Menggunakan jendela pop-up untuk menampilkan pesan pendek di halaman web tidak apa-apa, meskipun tidak begitu ramah. Namun, pop-up tidak berdaya untuk dilakukan dengan informasi panjang seperti ketentuan layanan situs web. Ini membutuhkan menggunakan sesuatu yang disebut Modal Modal Modal dan menanamkan tekstar box multi-line di kotak modal.
Hal ini terlalu sulit untuk menulis kode JavaScript secara manual, tetapi lebih mudah untuk menulis dengan Bootstrap.
1. Tujuan Dasar
Ada halaman web dengan hyperlink dan tombol:
Mengkliknya akan membuka kotak modal seperti yang ditunjukkan di bawah ini. Kotak modal ini, mengklik tombol X di sudut kanan atas dan konfirmasi di bawah ini akan ditutup.
2. Proses Produksi
1. Karena Anda perlu menggunakan bootstrap, Anda dapat mengunduh komponen di situs web resmi (klik untuk membuka tautan). Versi bootstrap yang digunakan di lingkungan produksi (klik untuk membuka tautan). Bootstrap3 tidak kompatibel dengan 2. Disarankan untuk menggunakan bootstrap3 secara langsung sesuai dengan dokumen pengembangannya. Artikel ini juga dibuat berdasarkan bootstrap3. Pada saat yang sama, efek JavaScript yang disediakan oleh Bootstrap3 perlu didukung oleh JQuery1.11 (klik untuk membuka tautan). Anda dapat mengunduh jQuery1.11 (klik untuk membuka tautan) kompatibel dengan browser lama IE6 (klik untuk membuka tautan) dari situs web resmi JQuery, daripada jQuery2 (klik untuk membuka tautan) di browser lama IE6. Setelah mengunduh, konfigurasikan direktori situs. Decompress bootstrap3 langsung ke direktori situs, dan tempatkan jQuery-1.11.1.js di direktori JS, yaitu, direktori yang sama dengan bootstrap.js. Struktur folder situs kira -kira sebagai berikut:
2. Kode halaman web ini adalah sebagai berikut, dan fragmen berikut dianalisis:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.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> box modal </title> <meta name = "viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-koggle = "modal" data-target = "#mymodal"> perjanjian layanan </a> </p> <p> <typephype = "kancing data-toggle =" Modal "Data-target ="#MyModal "Kancing Data-toggle =" Modal "Data-target ="#MyModal di sini> Tombol "KUCKGLE =" Modal "Data-target ="#MyModal di sini> id="myModal" role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4 id="myModalLabel"> Service Agreement</h4> </div> <div> <p align="center"> <textarea rows=3 readonly="true" /> The terms of service of this Agreement have legal memengaruhi. Ketentuan Layanan Perjanjian ini memiliki efek hukum. Ketentuan Layanan Perjanjian ini memiliki efek hukum. Ketentuan Layanan Perjanjian ini memiliki efek hukum. </textarea> </p> </div> <dv> <p align = "center"> <tombol type = "tombol" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </div> </body </dv>
(1) Bagian <head>
<Head> <!-Page Encode-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <itement> kotak modal </iteme> <!-Memerlukan halaman web ini untuk secara otomatis beradaptasi dengan layar PC, tablet, ponsel, dan perangkat lain-> <MetA name = "Viewport" Content = "width = perangkat-lebar, skala awal = 1.0, skala user = no"> <!-Contoh ini memerlukan dukungan dari tiga plug-in eksternal-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "scray"> <scrips = "teks/javascript" srcric = "Js/Js/Js/JS/JS/JS.11 type = "Text/JavaScript" src = "js/bootstrap.js"> </script> </head>
(2) Tautan dan tombol yang awalnya disajikan di halaman web
<p> <!-Data-koggle = "modal" data-target = "#mymodal" membutuhkan kotak modal terbuka mymodal-> <a data-koggle = "modal" data-target = "#mymodal"> perjanjian layanan </a> </p> <p> <!-class = "btn btn-danger" is the herytre dari. -> <typute type = "tombol" data-soggle = "modal" data-target = "#mymodal"> klik di sini untuk membaca perjanjian layanan </button> </p>
(3) Bagian Kotak Modal
Dasar -dasar kotak modal adalah sebagai berikut:
Oleh karena itu, kode berikut ditemukan:
<!-class = "modal fade" membutuhkan kotak modal untuk dibuka dengan efek animasi fade, class = "modal" juga ok, tetapi dibuka dengan sangat tiba-tiba. ID = "mymodal" menggemakan hyperlink dan tombol di atas-> <div id = "mymodal" role = "dialog"> <Div> <!-Tata letak kotak modal harus dilakukan setelah konten modal. -> <div> <div> <!-Ini adalah bagian judul dari kotak modal, dengan titik koma × dan karakter transfer dengan ×, yang pada dasarnya adalah tombol tutup-> <Tombol tipe = "tombol" Data-Dismiss = "Modal"> <span> × </span> </tombol> <!-Ini adalah judul kotak modal-/</span = "ini adalah judul Modal Box-> </span =" ini adalah judul Modal Box Modal-> </span = " <div> <!-Ini adalah bagian utama dari kotak modal, yang tertanam dengan kotak teks hanya baca dengan sejumlah baris 3. Kotak teks dipusatkan di bagian utama dari kotak modal. Tidak apa -apa tanpa kotak teks, tetapi konten akan disajikan kepada pengguna pada satu waktu. Jadi mengapa tidak memunculkan jendela saja? -> <p align = "center"> <baris tekstara = 3 readonly = "true" /> Ketentuan layanan perjanjian ini secara hukum efektif. Ketentuan Layanan Perjanjian ini memiliki efek hukum. Ketentuan Layanan Perjanjian ini memiliki efek hukum. Ketentuan Layanan Perjanjian ini memiliki efek hukum. </textarea> </p> </div> <div> <!-Ini adalah ekor dari kotak modal, dan tombol OK terpusat ditempatkan-> <p align = "center"> <tute type = "tombol" data-dismiss = "modal"> </tombol> </p> </div> </div> </div> </Div> </Div>
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.