迅睿CMS內(nèi)置了layer彈出層插件，可以輕松實現(xiàn)很多彈出層特效。
前面幾節(jié)課程分享了“iframe、視頻、圖片”的專用彈出層效果實現(xiàn)方法。
本節(jié)課程分享直接彈出頁面內(nèi)容，主要針對新手，讓不懂JS的新手也能輕松實現(xiàn)。
實現(xiàn)功能
在頁面點擊按鈕，彈出層顯示指定的內(nèi)容（非iframe）
前提條件、引用cms.js
模板中引用系統(tǒng)JS函數(shù)類文件
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
實現(xiàn)方法
如模板中添加如下頁面代碼，就已經(jīng)實現(xiàn)了點擊彈出層了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>帝云網(wǎng)絡(luò)-彈出層特效</title>
<!-- 系統(tǒng)關(guān)鍵js(放在head標簽內(nèi)，所有自建模板必須引用) -->
<script type="text/javascript">var is_mobile_cms = '{IS_MOBILE}';</script>
<script src="{LANG_PATH}lang.js" type="text/javascript"></script>
<script src="{HOME_THEME_PATH}js/jquery.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
<!-- 系統(tǒng)關(guān)鍵js結(jié)束 -->
</head>
<body>
<a class="btn btn-orange px-4" href="javascript:btn_zixun()">在線咨詢</a>
<div id="form-zixun" style="display: none;">
<div class="box p-4">
這里自由填寫彈出層需要顯示的內(nèi)容
</div>
</div>
<script>
function btn_zixun(){
layer.open({
type: 1,
title:'在線咨詢',
content: $('#form-zixun'),
area: ['600px', '500px']
});
}
</script>
</body>
</html>詳細說明：
示例：
在show.html界面顯示一個按鈕，點擊在彈出層中提交模塊內(nèi)容表單
只需將彈出層內(nèi)容區(qū)，放上模塊內(nèi)容表單的代碼就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>帝云網(wǎng)絡(luò)-彈出層特效</title>
<!-- 系統(tǒng)關(guān)鍵js(放在head標簽內(nèi)，所有自建模板必須引用) -->
<script type="text/javascript">var is_mobile_cms = '{IS_MOBILE}';</script>
<script src="{LANG_PATH}lang.js" type="text/javascript"></script>
<script src="{HOME_THEME_PATH}js/jquery.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
<!-- 系統(tǒng)關(guān)鍵js結(jié)束 -->
</head>
<body>
<a class="btn btn-orange px-4" href="javascript:btn_zixun()">在線咨詢</a>
<div id="form-zixun" style="display: none;">
<div class="box p-4">
{php extract(dr_get_mform_post_value(MOD_DIR, 'zixun',$id))}
<form action="" class="form-horizontal" method="post" name="myform" id="myform">
{$form}
<div class="fc-form-body">
{$myfield}
{$diyfield}
{$sysfield}
{if $is_post_code}
<div class="form-group">
<label class="control-label col-md-2">{dr_lang('驗證碼')}</label>
<div class="col-md-10">
<label>
<div class="form-recaptcha">
<div class="input-group">
<input type="text" class="form-control" name="code">
<div class="input-group-btn fc-code">
{dr_code(120, 35)}
</div>
</div>
</div>
</label>
</div>
</div>
{/if}
</div>
<div class="portlet-body form myfooter">
<div class="form-actions text-center">
<button type="button" onclick="dr_ajax_submit('{$post_url}', 'myform', '2000', '{$rt_url}')" class="btn green"> <i class="fa fa-save"></i> 提交內(nèi)容</button>
</div>
</div>
</form>
</div>
</div>
<script>
function btn_zixun(){
layer.open({
type: 1,
title:'在線咨詢',
content: $('#form-zixun'),
area: ['600px', '500px']
});
}
</script>
</body>
</html>