thinkphp非前后端分离，动态实现web弹出层/框(thinkphp+layui.layer)

问题

在前后端分离的情况下ajax请求接口之后，可能需要弹出层提示用户错误信息(例如密码错误)。非前后端分离情况下，通常使用跳转新页面以显示错误信息。现有需求：非前后端分离情况下，实现弹出层提示信息且不遮挡原页面内容。

原理

利用thinkphp $this->assign(); 将js脚本写入视图页面(类似xss)，然后再js脚本里面使用layui.layer。

代码

控制器

protected function showMsg($msg){
        $jqueryFile = "<script src='".__ROOT__."/Public/jquery.js'></script>"; //引入js
        $layerFile = "<script src='".__ROOT__."/Public/layer/layer.js'></script>"; //引入 layer
        $layerScript = "<script>layer.msg('".$msg."');</script>";
        $this->assign('jqueryFile',$jqueryFile);
        $this->assign('layerFile',$layerFile);
        $this->assign('layerScript',$layerScript);
    }

视图({$layerScript}必须放在页面最后)

使用

public function index(){
	$this->showMsg("hello");
}

效果图

其他效果
A

$layerScript = "<script>var ii = layer.load();setTimeout(function(){layer.close(ii);}, 2000);</script>";

B

$layerScript = "<script>layer.open({type: 1,area: ['600px', '360px'],shadeClose: true,content: '\<\div style=\"padding:20px;\">自定义内容\<\/div>'});</script>";
        

…
layer下载地址 http://layer.layui.com/