Table of Contents
yii2中如何使用modal弹窗之基本使用,yii2使用modal弹窗
创建
Home 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的显示
Copy after login
<span>echo</span> Html::a('创建', '#',<span> [
    </span>'id' => 'create',
    'data-toggle' => 'modal',
    'data-target' => '#create-modal',
    'class' => 'btn btn-success',<span>
]);</span>
Copy after login

3、创建modal
Copy after login
<?<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>?>
Copy after login

4、修改我们的create操作如下
Copy after login
<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>
Copy after login

 

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

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

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

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

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

继续阅读

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to introduce bootstrap into Eclipse How to introduce bootstrap into Eclipse Apr 05, 2024 am 02:30 AM

How to introduce bootstrap into Eclipse

How to introduce idea into bootstrap How to introduce idea into bootstrap Apr 05, 2024 am 02:33 AM

How to introduce idea into bootstrap

How to read the bootstrap mediation effect test results in stata How to read the bootstrap mediation effect test results in stata Apr 05, 2024 am 01:48 AM

How to read the bootstrap mediation effect test results in stata

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth 750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth Apr 23, 2024 pm 03:28 PM

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth

How to read the results of bootstrap mediation test How to read the results of bootstrap mediation test Apr 05, 2024 am 03:30 AM

How to read the results of bootstrap mediation test

What is the difference between bootstrap and springboot What is the difference between bootstrap and springboot Apr 05, 2024 am 04:00 AM

What is the difference between bootstrap and springboot

How to use bootstrap to test mediation effects How to use bootstrap to test mediation effects Apr 05, 2024 am 03:57 AM

How to use bootstrap to test mediation effects

How to export the results of bootstrap test mediation effect stata command How to export the results of bootstrap test mediation effect stata command Apr 05, 2024 am 03:39 AM

How to export the results of bootstrap test mediation effect stata command

See all articles