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/