Basic use of how to use modal pop-up windows in yii2, using modal pop-up windows in yii2

Basic use of how to use modal pop-up windows in yii2, using modal pop-up windows in yii2_PHP tutorial

WBOY

Release： 2016-07-12 08:51:18

Original

855 people have browsed it

How to use the basic use of modal pop-up windows in yii2, using modal pop-up windows in yii2

Author: Bailang Source: http://www.manks.top/yii2_modal_baseuse.html The copyright of this article belongs to the author, and you are welcome to reprint it. However, this statement must be retained without the author's consent, and a link to the original text must be provided in an obvious position on the article page. Otherwise, we reserve the right to pursue legal liability.

Modal is also a modal window, which is a pop-up window in layman’s terms. It is a bootstrap js plug-in, and the effect is very good.

There is no need to explain why you should use modal. During the development process of a website, I wouldn’t believe you if you said you have never used js pop-up windows! A good pop-up window not only gives people a sense of beauty, but also improves our development efficiency and even makes us feel better!

Let’s see how to use modal in yii2.

For example, when we added data before, we would usually click the button to jump to the add page, and then jump to the list page after saving.

Now we hope that when we click the add button, data will be added to the pop-up window on the current page. See the specific implementation.

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 class="modal-title">创建</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

At this time, when we click the button [Create], you will see the modal pop-up window.

Some students may say that there is no need to load this page asynchronously. Indeed, you can also echo $this->renderAjax(); directly on the page, but you need to be reminded that for this operation, remember to modify the action submitted by the form.

Regarding the use of modal, there are two points that need to be reminded:

Above, we have implemented the basic use of modal in yii2. We also talked about the use of modal structure gridview in yii2, I recommend you take a look.

[Considering that most domestic websites currently collect articles very frequently, and some even do not indicate the source of the original article, the original author hopes that readers can check the original article to prevent any problems and not update all articles to avoid misleading! ]