资讯专栏INFORMATION COLUMN

原生模态框,遮罩层

cloud / 3150人阅读

摘要:哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Documenttitle> <style> body { background-color: #000000; } ul, li { list-style: none; padding: 0; margin: 0; } .div1 { position: fixed; left: 0; right: 0; top: 100px; margin: 0 auto; width: 345px; height: 256px; background: #ffffff; border-radius: 5px; overflow: hidden; z-index: 100; } .line { width: 343px; border: 1px dashed #ebebeb; margin-top: 22px; } .q1 { max-width: 250px; height: 20px; font-size: 20px; font-family: PingFang-SC-Heavy; font-weight: bold; color: rgba(52, 52, 52, 1); line-height: 20px; margin-top: 30px; } .q2 { max-width: 250px; height: 19px; font-size: 19px; font-family: PingFang-SC-Bold; font-weight: bold; color: rgba(52, 52, 52, 1); line-height: 19px; margin-top: 9px; } .q3 { max-width: 250px; height: 19px; font-size: 19px; font-family: PingFang-SC-Bold; font-weight: bold; color: rgba(52, 52, 52, 1); margin-top: 10px; line-height: 19px; } .q4 { max-width: 250px; height: 15px; font-size: 16px; font-family: PingFang-SC-Medium; font-weight: 500; color: rgba(102, 102, 102, 1); margin-top: 12px; line-height: 15px; } li { margin: 0 auto; text-align: center; } .b1 { width: 113px; height: 41px; background: #b4b3b3; border-radius: 21px; border: 0; margin: 24px 0 0 34px; font-size: 16px; color: #ffffff; } .b2 { width: 113px; height: 41px; background: #cbaf7d; border-radius: 21px; border: 0; margin-left: 50px; font-size: 16px; color: #ffffff; } .shield { position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; left: 0; top: 0; z-index: 90; } </style> head> <body> <div> <div class="div1"> <ul style="width:100%;"> <li class="q1">哈哈哈哈中信营业厅li> <li class="q2">高尧三li> <li class="q3">汉中门分店li> <li class="q4">会员有效期:2020-10-10li> ul> <div class="line">div> <div> <button class="b1">取消button> <button class="b2">确定button> div> div> <div class="shield">div> div> body> html> DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Documenttitle> <style> body { background-color: #000000; } ul, li { list-style: none; padding: 0; margin: 0; } .div1 { position: fixed; top: 0; left: 0; width: 345px; height: 256px; background: #ffffff; border-radius: 5px; overflow: hidden; z-index: 100; } .line { width: 343px; border: 1px dashed #ebebeb; margin-top: 22px; } .q1 { max-width: 250px; height: 20px; font-size: 20px; font-family: PingFang-SC-Heavy; font-weight: bold; color: rgba(52, 52, 52, 1); line-height: 20px; margin-top: 30px; } .q2 { max-width: 250px; height: 19px; font-size: 19px; font-family: PingFang-SC-Bold; font-weight: bold; color: rgba(52, 52, 52, 1); line-height: 19px; margin-top: 9px; } .q3 { max-width: 250px; height: 19px; font-size: 19px; font-family: PingFang-SC-Bold; font-weight: bold; color: rgba(52, 52, 52, 1); margin-top: 10px; line-height: 19px; } .q4 { max-width: 250px; height: 15px; font-size: 16px; font-family: PingFang-SC-Medium; font-weight: 500; color: rgba(102, 102, 102, 1); margin-top: 12px; line-height: 15px; } li { margin: 0 auto; text-align: center; } .b1 { width: 113px; height: 41px; background: #b4b3b3; border-radius: 21px; border: 0; margin: 24px 0 0 34px; font-size: 16px; color: #ffffff; } .b2 { width: 113px; height: 41px; background: #cbaf7d; border-radius: 21px; border: 0; margin-left: 50px; font-size: 16px; color: #ffffff; } .shield { position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; left: 0; top: 0; z-index: 90; } </style> head> <body> <div> <div class="div1"> <ul style="width:100%;"> <li class="q1">哈哈哈哈中信营业厅li> <li class="q2">高尧三li> <li class="q3">汉中门分店li> <li class="q4">会员有效期:2020-10-10li> ul> <div class="line">div> <div> <button class="b1">取消button> <button class="b2">确定button> div> div> <div class="shield">div> div> body> html>

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/994.html

相关文章

  • 原生模态,罩层

    摘要:哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定meta charset=UTF-8 / meta name=viewport content=width=device-width, initial-scale=1.0 / meta http-equiv=X-UA-Compatible content=ie=edge / ...

    Alan 评论0 收藏0
  • 如何在angular.js中优雅的使用ui.bootstrap的modal组件

    摘要:提供唯一的方法配置。即文件名,在同一个页面有多个不同业务的模态框的情况下很方便点击确认按钮执行的代码可以从中获取和字段进一步操作发起请求等点击取消按钮执行的代码 ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题: 注册全局模态框实例的controlle...

    Jrain 评论0 收藏0
  • 原生js写出一个弹+罩层的页面,完成弹垂直居中页面且点击弹外任何区域去掉弹罩层的功能

    摘要:背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还 背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

    betacat 评论0 收藏0
  • 原生js写出一个弹+罩层的页面,完成弹垂直居中页面且点击弹外任何区域去掉弹罩层的功能

    摘要:背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还 背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

    CoderDock 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<