modal.wxml 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <view class="nav-list {{modalName=='defualtmodal'?'cur':''}}" bindtap='showModal' data-modal="defualtmodal">
  2. <view class="nav-title">普通弹出层</view>
  3. <view class="iconfont icon-right"></view>
  4. </view>
  5. <view class="nav-list {{modalName=='bottomModal'?'cur':''}}" bindtap='showModal' data-modal="bottomModal">
  6. <view class="nav-title">底部弹出层</view>
  7. <view class="iconfont icon-right"></view>
  8. </view>
  9. <view class="nav-list {{modalName=='modal'?'cur':''}}" bindtap='showModal' data-modal="modal">
  10. <view class="nav-title">两个操作的模态框</view>
  11. <view class="iconfont icon-right"></view>
  12. </view>
  13. <view class="nav-list {{modalName=='modals'?'cur':''}}" bindtap='showModal' data-modal="modals">
  14. <view class="nav-title">多个操作的模态框</view>
  15. <view class="iconfont icon-right"></view>
  16. </view>
  17. <view class="modal-box {{modalName=='defualtmodal'?'cur':''}}">
  18. <view class='modal-dialog'>
  19. <view class="modal-title">
  20. <text>复选框</text>
  21. <view class='bar-close badge danger round' bindtap='closeModal'>
  22. <text class='iconfont icon-close'></text>
  23. </view>
  24. </view>
  25. <view class='modal-bd'>
  26. <radio-group class="list-double-col list-box" bindchange="radioChange">
  27. <label class="radio list-li" wx:for="{{items}}">
  28. <view class='list-text'>{{item.value}}</view>
  29. <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
  30. </label>
  31. </radio-group>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="modal-box bottom-modal {{modalName=='bottomModal'?'cur':''}}">
  36. <view class='modal-dialog'>
  37. <view class="modal-title">
  38. <text>复选框</text>
  39. <view class='bar-close badge danger round' bindtap='closeModal'>
  40. <text class='iconfont icon-close'></text>
  41. </view>
  42. </view>
  43. <view class='modal-bd'>
  44. <radio-group class="list-double-col list-box" bindchange="radioChange">
  45. <label class="list-li" wx:for="{{items}}">
  46. <view class='list-text'>{{item.value}}</view>
  47. <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
  48. </label>
  49. </radio-group>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="modal-box {{modalName=='modal'?'cur':''}}">
  54. <view class='modal-dialog'>
  55. <view class="modal-title">
  56. <text>复选框</text>
  57. <view class='bar-close badge danger round' bindtap='closeModal'>
  58. <text class='iconfont icon-close'></text>
  59. </view>
  60. </view>
  61. <view class='modal-bd modal-message'>
  62. 带确认和取消
  63. </view>
  64. <view class='modal-option'>
  65. <view class='modal-option-btn'>取消</view>
  66. <view class='modal-option-btn success-text'>确认</view>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="modal-box {{modalName=='modals'?'cur':''}}">
  71. <view class='modal-dialog'>
  72. <view class="modal-title">
  73. <text>请选择</text>
  74. <view class='bar-close badge danger round' bindtap='closeModal'>
  75. <text class='iconfont icon-close'></text>
  76. </view>
  77. </view>
  78. <view class='modal-bd modal-message'>
  79. 带确认和取消
  80. </view>
  81. <view class='modal-option'>
  82. <view class='modal-option-btn success-text'>
  83. <text class='iconfont icon-moneybag'></text> 微信支付</view>
  84. <view class='modal-option-btn'>取消</view>
  85. <view class='modal-option-btn '>确认</view>
  86. </view>
  87. </view>
  88. </view>