ASCII码 ASCII码

模态框简单编写

发布于：2022-03-26 10:51:57  栏目：技术文档

模态框

图片展示：

1234

css代码：

  1. /* 初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  10. /* 头部 */
  11.    /* background-color:greenyellow; */
  12. header {
  13.     background-color: greenyellow;
  14.     padding: 0.5em 1em;
  15.     display: flex;
  16. }
  19. /* logo  */
  21. header .title {
  22.     font-weight: lighter;
  23.     font-style: italic;
  24.     color: white;
  25.     letter-spacing: 2px;
  26.     text-shadow: 1px 1px 1px #555;
  27. }
  30. /* 登录按钮 */
  32. header button {
  33.     margin-left: auto;
  34.     width: 5em;
  35.     border: none;
  36.     border-radius: 0.5em;
  37. }
  39. header button:hover {
  40.     cursor: pointer;
  41.     background-color: coral;
  42.     color: #fff;
  43.     box-shadow: 0 0 2px 2px #fff;
  44.     transition: 1s;
  45. }
  48. /* 模态框 */
  50. .modal .modal-form fieldset {
  51.     height: 15.5em;
  52.     background-color: rgb(131, 240, 116);
  53.     border: none;
  54.     padding: 2em 3em;
  55.     box-shadow: 0 0 5px #888;
  56. }
  59. /* 模态框表单标题 */
  61. .modal .modal-form fieldset legend {
  62.     padding: 7px 1.5em;
  63.     background-color: greenyellow;
  64.     color: white;
  65. }
  67. .modal .modal-form fieldset input {
  68.     height: 3em;
  69.     padding-left: 1em;
  70.     outline: none;
  71.     border: 1px solid #ddd;
  72.     font-size: 14px;
  73. }
  76. /* :focus: 表单控件,获取焦点时的样式 */
  78. .modal .modal-form fieldset input:focus {
  79.     box-shadow: 0 0 8px #888;
  80.     border: none;
  81. }
  83. .modal .modal-form fieldset button {
  84.     background-color: greenyellow;
  85.     color: white;
  86.     border: none;
  87.     height: 3em;
  88.     font-size: 16px;
  89.     height: 2.5em;
  90. }
  92. .modal .modal-form fieldset button:hover {
  93.     background-color: coral;
  94.     cursor: pointer;
  95. }
  98. /* 定位 */
  100. .modal .modal-form {
  101.     position: fixed;
  102.     top: 10em;
  103.     left: 35em;
  104.     right: 38em;
  105. }
  108. /* 遮罩 */
  110. .modal .modal-bg {
  111.     position: fixed;
  112.     /* 坐标全部清0,请定位到四个顶点 */
  113.     top: 0;
  114.     left: 0;
  115.     right: 0;
  116.     bottom: 0;
  117.     background-color: rgb(0, 0, 0, 0.5);
  118. }
  120. .modal {
  121.     display: none;
  122. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行