YII框架中使用layer弹出层，注册js文件

1. 首先到layer官网下载绿色layer3.0，官网地址：http://layer.layui.com/。以下是下载好的layer文件：

2. 将layer文件夹放到YII框架下的\web\js目录下

3. 将layer.js 文件注册到框架中，注册过程如下：

     打开\assets\AppAsset.php文件代码如下：

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        '../vendor/almasaeed2010/adminlte/bootstrap/css/bootstrap.min.css',
        '../vendor/almasaeed2010/adminlte/plugins/select2/select2.min.css',
        '../vendor/almasaeed2010/adminlte/plugins/iCheck/flat/blue.css',
        '../vendor/almasaeed2010/adminlte/plugins/morris/morris.css',
        '../vendor/almasaeed2010/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css',
        '../vendor/almasaeed2010/adminlte/plugins/datepicker/datepicker3.css',
        '../vendor/almasaeed2010/adminlte/plugins/daterangepicker/daterangepicker.css',
        '../vendor/almasaeed2010/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css',
        '../vendor/almasaeed2010/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css',
        'css/site.css',
    ];
    public $js = [
        'js/raphael-min.js',
        '../vendor/almasaeed2010/adminlte/plugins/select2/select2.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/jQueryUI/jquery-ui.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/morris/morris.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/sparkline/jquery.sparkline.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/knob/jquery.knob.js',
        '../vendor/almasaeed2010/adminlte/plugins/input-mask/jquery.inputmask.js',
        '../vendor/almasaeed2010/adminlte/plugins/input-mask/jquery.inputmask.date.extensions.js',
        '../vendor/almasaeed2010/adminlte/plugins/input-mask/jquery.inputmask.extensions.js',
        '../vendor/almasaeed2010/adminlte/plugins/datepicker/bootstrap-datepicker.js',
        '../vendor/almasaeed2010/adminlte/plugins/daterangepicker/moment.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/daterangepicker/daterangepicker.js',
        '../vendor/almasaeed2010/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/slimScroll/jquery.slimscroll.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/fastclick/fastclick.js',
        '../vendor/almasaeed2010/adminlte/plugins/chartjs/Chart.bundle.js',
        '../vendor/almasaeed2010/adminlte/plugins/flot/jquery.flot.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/flot/jquery.flot.resize.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js',
        '../vendor/almasaeed2010/adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js',
        'js/layer/layer.js',                 //将layer.js文件的相对路径写到这里
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        // 'yii\bootstrap\BootstrapThemeAsset',
        'dmstr\web\AdminLteAsset',
    ];
}

   以上代码的红色部分为添加layer.js 文件的相对路径到变量$js对应的数组中，

4. 在HTML页面注册并引入layer.js 文件代码如下：

<?php $this->registerJsFile(Yii::$app->request->baseUrl . "/js/layer/layer.js", ['depends' => ['app\assets\AppAsset']]); ?>

5. 使用layer弹出框，这里使用的是自定页弹出框

$('.city-data').on('click', function () {           
        $.get('{$requestCityUrl}', { id: $(this).attr('data-id'),s:$(this).attr('data-s') },
            function (data) {                
                //$('#city-modal').modal('show').find('#modalContent').html(data);
                layer.open({
                  type: 1,
                  title: "<font size='4' color='green'><b>城堡信息</b></font>",
                  skin: 'layui-layer-demo', //样式类名
                  closeBtn: 1, //显示关闭按钮
                  area: ['70%', '75%'],//宽高
                  anim: 1,
                  shadeClose: true, //开启遮罩关闭
                  content: data
                });
            } 
        );
    });
  效果如下：