多功能支持自定义滚动条弹出窗口

1、新建html文档。

2、书写hmtl代码。

<div id="page">

<h2>popModal</h2>

<div class="exampleContainer">

<div class="exampleLive">

<div class="exampleLiveTitle">default params</div>

<button id="popModal_ex1">Example</button>

</div>

<div class="exampleCode">

<span class="text">$('</span><span class="tag">#elem</span><span class="text">').popModal(</span>{

<p class="tab"><span class="key">html</span> : <span class="val">$('#content').html()</span>,

<p class="tab"><span class="key">placement</span> : <span class="val">'bottomLeft'</span>,

<p class="tab"><span class="key">showCloseBut</span> : <span class="val">true</span>,

<p class="tab"><span class="key">onDocumentClickClose</span> : <span class="val">true</span>,

<p class="tab"><span class="key">onOkBut</span> : <span class="val">function(){ }</span>,

<p class="tab"><span class="key">onCancelBut</span> : <span class="val">function(){ }</span>,

<p class="tab"><span class="key">onLoad</span> : <span class="val">function(){ }</span>,

<p class="tab"><span class="key">onClose</span> : <span class="val">function(){ }</span>

}<span class="text">)</span>;

</div>

</div>

</div>

3、书写css代码。

.popModal {position:absolute;background:#fff;padding:15px;border:1px solid #aaa;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);text-align:left;max-width:300px;min-width:180px;z-index:9997;box-sizing:border-box}

.popModal .close {line-height:12px;font-size:25px;font-weight:bold;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0}

.popModal .close:hover {opacity:1}

.popModal .popModal_content {margin:15px auto;word-wrap:break-word;font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial}

.popModal .popModal_content.popModal_contentOverflow {max-height:200px;overflow-y:auto;overflow-x:hidden;margin:15px -8px;padding:0 7px}

.popModal .popModal_content:before {content:'';position:absolute;left:0;right:0;height:20px;bottom:-20px}

.popModal .popModal_footer {background:#fafafa;padding:15px;border-top:1px solid #ddd;text-align:right;position:absolute;bottom:0;left:0;right:0}

.popModal .popModal_footer button {margin:0 0 0 5px}

.popModal:before,

.popModal:after {content:'';position:absolute;border:10px solid transparent}

.popModal:after {z-index:1}

.popModal.bottomRight {right:0}

.popModal.bottomLeft:before,

.popModal.bottomRight:before,

.popModal.bottomCenter:before {border-top-width:0;border-bottom-color:#aaa;top:-10px;left:6px}

.popModal.bottomLeft:after,

.popModal.bottomRight:after,

.popModal.bottomCenter:after {border-top-width:0;border-bottom-color:#fff;top:-9px;left:6px}

.popModal.bottomRight:before,

.popModal.bottomRight:after {left:auto;right:6px}

.popModal.bottomCenter:before,

.popModal.bottomCenter:after {left:50%;margin-left:-10px}

.popModal.leftTop:before,

.popModal.leftCenter:before {border-right-width:0;border-left-color:#aaa;top:6px;right:-10px}

.popModal.leftTop:after,

.popModal.leftCenter:after {border-right-width:0;border-left-color:#fff;top:6px;right:-9px}

.popModal.rightTop:before,

.popModal.rightCenter:before {border-left-width:0;border-right-color:#aaa;top:6px;left:-10px}

.popModal.rightTop:after,

.popModal.rightCenter:after {border-left-width:0;border-right-color:#fff;top:6px;left:-9px}

.popModal.leftCenter:before,

.popModal.rightCenter:before {top:50%;margin-top:-10px}

.popModal.leftCenter:after, 

.popModal.rightCenter:after {top:50%;margin-top:-10px}

4、书写并添加js代码。

<script src="jquery.min.js"></script>

<script src="popModal.js"></script>

5、代码整体结构。

6、查看效果。