帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 超好看的模态框效果
超好看的模态框效果
浏览:1964次
-
评论:0次
-
发布时间:2018-09-11
Html
Css
Js
点击显示
head
x
内容在此
h4 { margin-left:20px; color:white; } p { text-align:center; } .btn { width:100px; height:35px; border-radius:5px; font-size:16px; color:white; background-color:cornflowerblue; } .btn:hover,.btn:focus { background-color:#95b4ed; } .modal { display:none; width:100%; height:100%; position:fixed; left:0; top:0; z-index:1000; background-color:rgba(0,0,0,0.5); } .modal-content { display:flex; flex-flow:column nowrap; justify-content:space-between; width:50%; max-width:700px; height:auto; max-height:500px; margin:100px auto; border-radius:10px; background-color:#fff; -webkit-animation:zoom 0.6s; animation:zoom 0.6s; resize:both; overflow:auto; } @-webkit-keyframes zoom { from { -webkit-transform:scale(0) } to { -webkit-transform:scale(1) } }@keyframes zoom { from { transform:scale(0) } to { transform:scale(1) } }.modal-header { box-sizing:border-box; background-color:rgb( 23,65,91); border-bottom:1px solid #ccc; display:flex; justify-content:space-between; align-items:center; } .close { color:#b7b7b7; font-size:30px; font-weight:bold; margin-right:20px; transition:all 0.3s; } .close:hover,.close:focus { color:#95b4ed; text-decoration:none; cursor:pointer; } .modal-body { padding:10px; font-size:16px; box-sizing:border-box; height:auto; } .modal-footer { box-sizing:border-box; /* border-top:1px solid #ccc; */ display:flex; padding:15px; justify-content:flex-end; align-items:center; } .modal-footer button { width:60px; height:35px; padding:5px; box-sizing:border-box; margin-right:10px; font-size:16px; color:white; border-radius:5px; background-color:cornflowerblue; } .modal-footer button:hover,.modal-footer button:focus { background-color:#95b4ed; cursor:pointer; } @media only screen and (max-width:700px) { .modal-content { width:80%; } }
var btn = document.getElementById('showModel'); var close = document.getElementsByClassName('close')[0]; var cancel = document.getElementById('cancel'); btn.addEventListener('click', function() { modal.style.display = "block"; }); close.addEventListener('click', function() { modal.style.display = "none"; }); cancel.addEventListener('click', function() { modal.style.display = "none"; });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>超好看的模态框效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:点击弹出模态框
加载进度样式或是等级样式效果
文字超过一定字数就显示省略号效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1964
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值