介紹一款非常好用的前端彈窗插件：

layer 官網(wǎng)地址：http://layer.layui.com/

根據(jù)官方的API：layer的iframe彈窗

//iframe層-父子操作 layer.open({   type: 2,   area: ['700px', '530px'],   fix: false, //不固定   maxmin: true,   content: 'test/iframe.html' });

這里以php開發(fā)為例 演示如何 提交表單后自動關(guān)閉layer彈窗

（1）彈出layer編輯框 ：

function edit(id){  if(id==null||id==''||id=='undefined'){  alert('操作編號為空，請聯(lián)系管理員');  }    layer.open({   type: 2,   area: ['700px', '530px'],   fix: false, //不固定   maxmin: true,   content: 'index.php?m=content&c=meiti&a=edit_paiqi&id='+id  }); }

（2）編輯頁面主要代碼

<input name="dosubmit" type="submit" id="dosubmit" value="提交" class="button" >

（3）php后臺保存數(shù)據(jù)并指向一個關(guān)閉layer窗口的方法

public function edit_config_paiqi(){ 		$id = trim($_REQUEST['id']); 		$paiqi_db = pc_base::load_model('paiqi_config_model'); 		if($_REQUEST['dosubmit']){ 			$insertinfo = array(); 			$insertinfo['catid'] = trim($_POST['catid']); 			$insertinfo['meitiid'] = trim($_POST['meitiid']); 			$insertinfo['title'] = trim($_POST['title']);	 			$insertinfo['meitizhuname'] = trim($_POST['meitizhuname']); 			$insertinfo['meitizhuid'] = trim($_POST['meitizhuid']); 			$insertinfo['createtime'] = SYS_TIME; 			$insertinfo['saturation'] = trim($_POST['saturation']); 			$datas = $paiqi_db->update($insertinfo,array("id"=>$id)); 			if($datas){ 				<span style="color:#ff0000;">showmessage(L('operation_success'),'?m=content&c=meiti&a=closewindow');//保存成功指向關(guān)閉窗口方法</span> 			} 		}else{ 			$datas = $paiqi_db->select(array("id"=>$id)); 			$template = "edit_config_paiqi"; 			include $this->admin_tpl($template); 		} 	}

 	/** 	 * 關(guān)閉layer層 	 */ 	public function closewindow(){ 		$template = "close_layer"; 		include $this->admin_tpl($template); 	}

（4）關(guān)閉窗口并刷新父窗口頁面的關(guān)鍵代碼

$(function(){  parent.location.reload();//刷新父窗口   parent.layer.closeAll();//關(guān)閉所有l(wèi)ayer窗口 });

注意：該頁面需要加載layer需要的js庫才能使用layer方法

相關(guān)學(xué)習(xí)推薦：php編程（視頻）