Yii2学习笔记-Modal窗口 [ 技术分享 ]

lijun_ay 2016-09-19 07:28:50 10395次浏览 7条回复 13 1 0

最近在弄modal窗口，发现几乎每个页面都需要，做了一个通用的modal，放到了main layout中，其他页面直接使用即可。

views/layouts/main.php 中增加


<?php 
Modal::begin([
    'id' => 'common-modal',
    'header' => '<h4 class="modal-title"></h4>',
    'footer' =>  '<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',
]);


$js = <<<JS
$(".modaldialog").click(function(){ 
        aUrl = $(this).attr('data-url');
        aTitle = $(this).attr('data-title');
        console.log(aTitle);
        console.log(aUrl);
        
        $($(this).attr('data-target')+" .modal-title").text(aTitle);
        $($(this).attr('data-target')).modal("show")
             .find(".modal-body")
             .load(aUrl); 
        return false;
   }); 
JS;
$this->registerJs($js);

Modal::end(); 
?>

使用示例：

Html::a('修改密码', '/account/changepwd', [
                                    'id' => 'account-changepwd',
                                    'class' => 'modaldialog',
                                    'data-toggle' => 'modal',
                                    'data-url' => Url::toRoute(['/account/changepwd']),
                                    'data-title' => '修改密码',
                                    'data-target' => '#common-modal',
                    ])
觉得很赞

共 7 条回复

默认排序
  • 回复于 2016-09-19 09:46 举报

    写的很好，那天用一下

    回复 0 0
  • 回复于 2016-09-19 12:30 举报 
    码上
    回复 0 0
  • 回复于 2016-11-19 23:41 举报

    没看懂、

    回复 0 0
  • 回复于 2016-11-19 23:42 举报

    怎么 嵌入 jQuery的写法

    共 1 条回复
    回复于 2017-01-14 16:39 回复

    $js = <<<JS
    这里写javascript代码
    JS;
    $this->registerJs($js);

    回复 0 0
  • 回复于 2017-01-14 16:49 举报

    `感觉并不是很好，这样设计会将HTML，JS都写入到了PHP中，后期维困难。而且这个设计扩展性不好。
    模态框其实就是简单的HTML弹框，不要理解的过于复杂

    tip.html （这个文件里可以写各种各种的模态框样式）例如：

    <div id="confirm">自己脑补样式格式</div>
<div id="fail">自己脑补样式格式</div>
<div id="success">自己脑补样式格式</div>
<div id="warning">自己脑补样式格式</div>

    ...等等。

    然后tip.js

    var modal_confirm = $("#confirm");
var modal_fail = $("#fail");
var modal_success = $("#success");
var modal_warning = $("#warning");
...后期扩展，可以继续在下面写，同时在tip.html模板里也要有对应的DIV
var modal = {
    confirm: function (message, type) {
        modal_confirm .find('.modal-info').html(message);
        if (type == '') {
            modal_confirm.find('.modal-body i').hide();
        } else if (type == 'success') {
            modal_confirm.find('.modal-body i').removeClass().addClass('fa fa-check-circle');
        } else if (type == 'error') {
            modal_confirm.find('.modal-body i').removeClass().addClass('glyphicon glyphicon-remove-circle');
        }
        modal_confirm.modal('show');
        return {
            on: function (callback) {
                if (callback && callback instanceof Function) {
                    modal_confirm.find('.ok').click(function () {
                        callback(true)
                    });
                }
            }
        };
    },
....这里应该知道怎么写了吧
}

    如何使用呢：

    modal.confirm('哈哈哈','success');
....(其他样子，自己扩展)`
    共 1 条回复
    回复于 2017-01-16 09:29 回复

    恩，很好，随着学习的深入，越来越发现，你这样写是最合理的方法，谢谢！

    回复 0 0
  • 回复于 2017-07-06 20:30 举报

    我的弹窗不展示而且也不跳转页面

    回复 0 0
  • 回复于 2017-12-13 14:53 举报

    请问modal 可以嵌套吗？ 在一个modal里面再弹出一个modal这样子， 好像不可以是不？

    回复 0 0

回复话题

您需要登录后才可以回复。登录 | 立即注册
lijun_ay
见习主管

lijun_ay

注册时间：2016-04-26
最后登录：2019-02-20
在线时长：5小时4分
  • 粉丝1
  • 金钱435
  • 威望0
  • 积分485
私信

热门话题