功能：点击链接或图片后，自定义弹出层，水平居中显示
css样式嵌入js中，只需一次引用即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{margin: 0; padding: 0; border: none;}
#app{background: #ccc; height: 1200px;}
</style>
</head>
<body>
<div id="app">
<a href="javascript:;">链接</a>
</div>
</body>
<script>
(function () {
/* dialog 2018/11/26
* @ dialog_content dialog html
* @ www.e945.net
*/
function get_dialog(dialog_content) {
var nobita_dialog = '<div id="nobita_dialog" class="shot-overlay"><a href="#" class="close-overlay"><img src="https://img-blog.csdnimg.cn/2022010619300022629.png" alt="Icon shot x light"></a><div class="overlay-content">'+ dialog_content +'</div></div>';
$(document.body).append(nobita_dialog);
}
$(document.body).append('<style>#nobita_dialog{background:rgba(30,30,30,0.9);top:0;left:0;z-index:9997;width:100%;height:100%;position:fixed;overflow-y:scroll;box-sizing:border-box;transition:all .07s ease-in}#nobita_dialog a.close-overlay{position:absolute;top:0;right:0;width:20px;height:20px;padding:20px;opacity:.5;z-index:1;background-repeat:no-repeat;background-position:20px 20px}#nobita_dialog .overlay-content{position:absolute;top:20px;left:50%;width:800px;margin-left:-400px;background:#f4f4f4;box-sizing:border-box;transition:all .1s ease-in;transform:translateY(0);visibility:visible;opacity:1}#nobita_dialog .overlay-content img{width:100%}</style>');
$(document).on('click', '#nobita_dialog', function () {
$('#nobita_dialog').remove();
})
//差异化操作
$(document).on('click', '#app a', function () {
get_dialog('<img src="https://web.2008php.com/2018_Website_appreciate/2018-06-29/20180629100209.jpg">');
})
})();
</script>
</html>
1660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
