Saat menggunakan kotak dialog Modal Bootstrap, Anda perlu menulis kotak dialog HTML pada halaman. Jika ada banyak tempat di halaman yang memerlukan kotak dialog, itu berarti Anda perlu menulis beberapa yang terasa sangat merepotkan. Saya tidak terbiasa dengan metode kotak dialog modal Bootstrap, jadi saya membuat enkapsulasi dan ekspansi sederhana, menambahkan judul, lebar dan tinggi kustom, dan ditampilkan di tengah sesuai dengan lebar dan tinggi.
Properti default:
ID: "Modal", // ID Pop-up
Judul: "Dialog", // Judul Pop-Up
Lebar: "600", // Lebar jendela popt-up, % tidak didukung untuk saat ini
Tinggi: "500", // Tinggi jendela yang populer, tidak mendukung %
latar belakang: true, // apakah oklusi ditampilkan, itu sama dengan kotak modal bootstrap asli
Keyboard: Benar, // Apakah akan mengaktifkan kunci ESC untuk keluar, itu sama dengan kotak modal bootstrap asli
Remote: "", // Muat URL Jarak Jauh, Sama Seperti Kotak Modal Bootstrap Asli
OpenEvent: null, // fungsi panggilan balik setelah jendela pop-up dibuka
CloseEvent: null, // fungsi panggilan balik setelah jendela pop-up ditutup
Okevent: null // klik tombol OK untuk fungsi panggilan balik
Bagaimana menggunakan:
1. Tentukan melalui data html-* atribut
Salin kode sebagai berikut: <a href = "#" data-remote = "test.html" data-mtitle = "Modal1" data-id = "m1" data-width = "600" Data-Okevent = "OK ()"> demo pop-up </a>
2. Inisialisasi melalui JS
$ (". Mzdialog"). Mzdialog ();
Tempat dan bug yang tidak tepat, berikut ini hanya referensi untuk belajar dan Anda dapat memodifikasinya dan memperbaikinya sendiri
1. Plug-in Bootstrap-MzDialog hanya memiliki 2 tombol saat ini. Batalkan dan konfirmasi, dan tombol khusus belum didukung. Anda dapat memodifikasi kode sumber dan menambahkan fungsi ini.
2. Anda hanya dapat menggunakan metode HTML Data-* untuk mendefinisikannya. Anda tidak mendukung parameter konfigurasi selama inisialisasi JS. Anda dapat memodifikasi kode sumber dan memperluas fungsi ini sendiri.
3. Berat dan tinggi tidak boleh digunakan.
4. Perhatikan bahwa fungsi callback di sini harus dalam format string, seperti okevent: "ok ()". Di sini, fungsi yang ditentukan oleh fungsi OK itu sendiri, ingat untuk memasukkan ();
Kode Sumber JS:
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- backdrop:true,//Whether the occlusion is displayed, the same as the native bootstrap modal box keyboard:true,//Whether the esc key is enabled to exit, the same as the native bootstrap modal box remote:"",//Load the remote url, the same as the native bootstrap modal box openEvent:null,//Calling the callback function closeEvent:null,//Calling the pop-up function okevent: null // klik tombol OK untuk fungsi callback}; // jendela pembuatan dinamis var createTialog = {init: function (opts) {var _self = this; // jendela insert dinamis var d = _self.dhtml (opts); $ ("body"). append (d); var modal = $ ("#"+opts.id); // inisialisasi window modal.modal (opts); // Posisi ukuran jendela 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 // Tampilkan window.modal ('show') // hapus jendela setelah menyembunyikan jendela html .on ('tersembunyi', function () {modal.remove (); $ (". Modal-Backdrop"). Remove (); if (opts.closeEvent) {eval eval (opts.closeEvent);} {if ifts.closeEvent) {eval eval. if (opts.openevent) {eval (opts.openevent); }, dhtml: function (o) {return '<div id = "'+o.id+'" role = "dialog" aria-laBelledby = "mymodallabel" aria-hidden = "true"> <v> <tombol type = "data-dismiss =" modal "h-hidden =" true "> × </Tombol" DATA-DISMISS = "Modal" HIDENDS = "true"> × </Tombol> </Tombol> id = "mymodallabel"> '+o.title+' </h3> </div> <ver> <p> Memuat ... </p> </div> <von> <tombol data-dismiss = "modal" aria-hidden = "true"> Batal </butt> <button> Konfirmasi </tombol> </div> </div> '; }}; kembalikan this.each (function () {$ (this) .click (function () {var opts = $ .extend ({}, default, {id: $ (this) .attr ("data-id"), judul: $ (ini) .attr ("data-mtitle"), lebar: $ (ini) .attr ("data). latar belakang: $ (ini) .attr ("data-backdrop"), keyboard: $ (ini) .attr ("data-keyboard"), jarak jauh: $ (ini) .attr ("data-remote"), openEvent: $ (ini) .attr ("data-openevent"), CloseEvent: $ (ini). okevent: $ (ini) .attr ("data-okevent")}); }; }) (jQuery);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.