微信小程序 弹框和模态框实现代码

admin

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. }

复制代码