点击弹出确认框
<a class="btn btn-warning btn-lg" id="confirm-btn" data-show-layer="hw-layer" role="button">点击弹出确认框</a> <div class="hw-overlay" id="hw-layer">
<div class="hw-layer-wrap">
<div class="row">
<div class="col-md-3 col-sm-12 hw-icon">
<i class="glyphicon glyphicon-info-sign"></i>
</div>
<div class="col-md-9 col-sm-12">
<h4>你确定吗?</h4>
<p>这是HTML+CSS+Javascript实现的一个弹出层效果,它可以在PC和移动端浏览器上工作。</p>
<br/>
<button class="btn btn-success hwLayer-ok">确 定</button>
<button class="btn btn-warning hwLayer-cancel">取 消</button>
</div>
</div>
</div>
</div> $('#confirm-btn').hwLayer({
width: 500,
tapLayer: true,
afterClose: function() {
console.log('close');
}
});
$(".hwLayer-ok").on('click', function() {
console.log('您已经确定了!');
$('#hw-layer').hwLayer('close');
}); <a class="btn btn-info btn-lg" id="info-btn" data-show-layer="hw-layer-info" role="button">点击弹出信息层</a> <div class="hw-overlay" id="hw-layer-info">
<div class="hw-layer-wrap">
<a class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></a>
<div class="row" id="hw-layer-info">
<p>尽管知道运动有诸多好处,坚持仍是难题。如果告诉你,运动可以让你年轻10岁,是不是更有动力了呢?</p>
</div>
</div>
</div> $('#info-btn').hwLayer({
tapLayer: true //blur关闭弹出层
});
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
