轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
轻源码 门户 微信小程序 查看主题

微信小程序弹框、模态框代码, CSS 清除浮动 flexfix

发布者: 达达 | 发布时间: 2019-4-12 18:20| 查看数: 4833| 评论数: 0|帖子模式

一:弹框、模态框代码

作者:未知,来自原文地址 
效果图:

  1. <view class="wxapp-modal" style="{{modal_style}}">
  2. <view class="content">
  3. </view>
  4. <view class="mask" bindtap="closeModal"></view>
  5. </view>
  1. /*模态框*/
  2. .wxapp-modal{
  3. width: 100%;
  4. height: 100%;
  5. position: fixed;
  6. top: 0px;
  7. left: 0px;
  8. z-index:999;
  9. }
  10. .wxapp-modal .content{
  11. width: 100%;
  12. bottom: 10px;
  13. text-align: center;
  14. position: absolute;
  15. }
  16. .wxapp-modal .content .header{
  17. margin: auto;
  18. width: 93%;
  19. height: 60px;
  20. line-height: 60px;
  21. text-align: center;
  22. background-color: #FFFFFF;
  23. position: relative;
  24. z-index:9999;
  25. border-top-left-radius: 8px;
  26. border-top-right-radius: 8px;
  27. border-bottom: 1px #eee solid;
  28. }
  29. .wxapp-modal .content .body{
  30. margin: auto;
  31. width: 93%;
  32. background-color: #FFFFFF;
  33. position: relative;
  34. z-index:9999;
  35. border-bottom-left-radius: 8px;
  36. border-bottom-right-radius: 8px;
  37. overflow: hidden;
  38. }
  39. .wxapp-modal .content .footer{
  40. margin: auto;
  41. width: 93%;
  42. height: 60px;
  43. line-height: 60px;
  44. background-color: #FFFFFF;
  45. position: relative;
  46. z-index: 9999;
  47. border-radius: 8px;
  48. margin-top: 10px;
  49. text-align: center;
  50. }
  51. .wxapp-modal .content .footer button{
  52. display: inline-block;
  53. width: 49%;
  54. height: 60px;
  55. line-height: 60px;
  56. background-color: #FFFFFF;
  57. margin-left: 0px;
  58. }
  59. .wxapp-modal .content .footer button:active{
  60. background-color: #eee;
  61. }
  62. .wxapp-modal .content .footer button::after{
  63. content:none;
  64. }
  65. .wxapp-modal .content .footer .cancel{
  66. color: #fa5b43;
  67. border-right: 1px #eee solid;
  68. border-top-right-radius: 0px;
  69. border-bottom-right-radius: 0px;
  70. border-top-left-radius: 8px;
  71. border-bottom-left-radius: 8px;
  72. }
  73. .wxapp-modal .content .footer .confirm{
  74. color: #1ed3fa;
  75. border-top-left-radius: 0px;
  76. border-bottom-left-radius: 0px;
  77. border-top-right-radius: 8px;
  78. border-bottom-right-radius: 8px;
  79. }
  80. .wxapp-modal .mask{
  81. width: 100%;
  82. height: 100%;
  83. position: fixed;
  84. top: 0px;
  85. background-color:rgba(0,0,0,0.5);
  86. }

二: CSS 清除浮动 flexfix

 
很多同学都在使用下面的骨灰级解决办法:

  1. .clear{
  2. clear:both;
  3. height:0;
  4. overflow:hidden;
  5. }

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }

用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

很拉轰的浮动闭合办法:

  1. .clearfix {
  2. overflow: auto;
  3. _height: 1%;
  4. }

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

  1. .clearfix{overflow:hidden;_zoom:1;}

以上为转载 我用的是拉轰的浮动闭合 直接解决浮动不占位的问题。

最新评论

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

客服QQ点击咨询

微信公众号

APP客户端

Copyright © 2016-2019 http://www.qingyuanma.com/ 鲁ICP备17014494号

快速回复 返回顶部 返回列表