Jadual Kandungan
yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗
创建
Rumah php教程 php手册 yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗

yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗

Jun 13, 2016 am 08:38 AM
bootstrap

yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗

作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Modal也即是模态窗,通俗的说就是弹窗。是一款bootstrap的js插件,使用效果也是非常好。

为什么要使用modal就不必多说了,一个网站,在开发过程中你说你没用过js弹窗我都不信!好的弹窗不仅仅给人以美感,也会让我们开发效率提高,甚至心情也会舒畅!

我们看看在yii2中如何使用modal。

比如我们之前添加数据的时候,通常情况下会点击按钮跳转到添加页面,保存后再跳转到列表页。

现在我们希望点击添加按钮的时候,在当前页面弹窗添加数据,看具体实现。

1、use yii\bootstrap\Modal;
2、创建一个按钮,用于调modal的显示
Salin selepas log masuk
<span>echo</span> Html::a('创建', '#',<span> [
    </span>'id' => 'create',
    'data-toggle' => 'modal',
    'data-target' => '#create-modal',
    'class' => 'btn btn-success',<span>
]);</span>
Salin selepas log masuk

3、创建modal
Salin selepas log masuk
<?<span>php 
Modal</span>::<span>begin([
    </span>'id' => 'create-modal',
    'header' => '<h4 id="创建">创建</h4>',
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',<span>
]); 
</span><span>$requestUrl</span> = Url::toRoute('create'<span>);
</span><span>$js</span> = <<<<span>JS
    $</span>.get('{$requestUrl}', {},
        <span>function</span><span> (data) {
            $(</span>'.modal-body').<span>html(data);
        }  
    );
JS;
</span><span>$this</span>->registerJs(<span>$js</span><span>);
Modal</span>::<span>end</span><span>(); 
</span>?>
Salin selepas log masuk

4、修改我们的create操作如下
Salin selepas log masuk
<span>public</span> <span>function</span><span> actionCreate()
{
    </span><span>$model</span> = <span>new</span><span> Test();
    </span><span>if</span> (<span>$model</span>->load(Yii::<span>$app</span>->request->post()) && <span>$model</span>-><span>save()) {
        </span><span>return</span> <span>$this</span>->redirect(['index'<span>]);
    } </span><span>else</span><span> {
        </span><span>return</span> <span>$this</span>->renderAjax('create',<span> [
            </span>'model' => <span>$model</span>,<span>
        ]);
    }
}</span>
Salin selepas log masuk

 

这个时候我们点击按钮[创建],会看到modal弹窗。

有同学可能要说,这个页面没必要异步加载过来。确实,你也可以直接在页面上echo $this->renderAjax();,不过需要提醒的是,该操作记得修改表单提交的action哦。

关于modal的使用,此处有两点需要提醒大家:

以上,我们在yii2中实现了modal的基本使用。我们还讲述了在yii2中有关modal结gridview的使用,推荐你看一看。

[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]

继续阅读

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara mendapatkan bar carian bootstrap Cara mendapatkan bar carian bootstrap Apr 07, 2025 pm 03:33 PM

Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara melakukan pusat menegak bootstrap Cara melakukan pusat menegak bootstrap Apr 07, 2025 pm 03:21 PM

Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Apa yang Perlu Dilakukan Sekiranya Jadual Bootstrap Menggunakan Ajax untuk mendapatkan data yang dihiasi Apa yang Perlu Dilakukan Sekiranya Jadual Bootstrap Menggunakan Ajax untuk mendapatkan data yang dihiasi Apr 07, 2025 am 11:54 AM

Penyelesaian ke Jadual Bootstrap Kod Garbled Apabila menggunakan AJAX untuk mendapatkan data dari pelayan: 1. Tetapkan pengekodan aksara yang betul dari kod pelayan (seperti UTF-8). 2. Tetapkan tajuk Permintaan dalam permintaan AJAX dan tentukan pengekodan aksara yang diterima (terima-charset). 3. Gunakan penukar "Unescape" jadual bootstrap untuk menyahkod entiti HTML yang melarikan diri ke dalam aksara asal.

See all articles