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
});
}
);
});
效果如下: