1、设置css样式:
<style>
.rule-popup-box{display: none; position: absolute; top: 0; right: 0; z-index: 100; width: 380px; padding: 20px; background-color: #fff; border: 3px solid #c4c4c4; }
.rule-popup-box .tit { border-bottom: 1px solid #dedede; }
.rule-popup-box .tit h3 { padding-bottom: 10px; color: #333; font-size: 16px; }
.rule-popup-box .con { padding: 10px 0 0 0; }
.rule-popup-box .con ul { padding-bottom: 5px; }
.rule-popup-box .con ul li { color: #333; padding: 2px 0 2px 20px; text-indent: -20px;list-style:none;}
</style>
2、设计html代码:
<!-- 规则弹框 -->
<div class="rule-link-wrap" style="display: inline-block;">
<a href="#rule-popup-box-01" class="d-rule-link rule-link">模板说明</a>
<div class="rule-popup-box" id="rule-popup-box-01">
<div class="tit">
<h3>模板说明</h3>
</div>
<div class="con">
<ul>
<li>1、文件名:主题名称+基日+基点,中间用"-"隔开。(如:主题名称-20160105-1000)</li>
<li>2、excel标题:表有四个属性标题(即证券代码,证券简称,开始日期,结束日期);这4个顺序不能颠倒。日期没有,则不填。</li>
<li>3、日期格式:年月日之间用"-"隔开。(如:2016-06-12)</li>
</ul>
</div>
</div>
</div>
<!-- 规则弹框结束 -->
3、js代码:
//模板弹框说明
$(".rule-link-wrap").hover(function() {
var href=$(this).attr('href');
$(this).find(".rule-popup-box").show();
}, function() {
$(this).find(".rule-popup-box").hide();
});