Examples of custom modal pop-up window in WeChat applets

This article mainly introduces in detail the user-defined modal pop-up window of small program practice, which has some reference value, if you are interested, please refer to this article for details about the custom mode pop-up window of small program practice, which has some reference value. if you are interested, please refer to it.

First, let's take a look at the modal pop-up window officially provided for your reference. the specific content is as follows:

  
 
  
Button
   
  
  
  
  
    
    
  
   
Pop-up window title
    
    
      
    Title   
      
     
      
    Title   
      
     
      
    Title   
      
     
      
    Title   
      
     
      
    Remarks   
      
     
    
  
   
OK
   
 

Wxss:

/* Button */. btn {width: 80%; padding: 20rpx 0; border-radius: 10rpx; text-align: center; margin: 40rpx 10%; background: #000; color: # fff ;} /* mask */. drawer_screen {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden;}/* content */. drawer_box {width: drawing RPX; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: # FAFAFA; margin: -150px 50rpx 0 50rpx; border-radius: 3px ;}. drawer_title {padding: 15px; font: 20px "microsoft yahei"; text-align: center ;}. drawer_content {height: 210px; overflow-y: scroll;/* scroll beyond the height of the parent box */}. btn_ OK {padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid # E8E8EA; color: # 3CC51F ;}. top {padding-top: 8px ;}. bottom {padding-bottom: 8px ;}. title {height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei ";}. input_base {border: 2rpx solid # ccc; padding-left: 10rpx; margin-right: 50rpx ;}. input_h30 {height: 30px; line-height: 30px ;}. input_h60 {height: 60px ;}. input_view {font: 12px "microsoft yahei"; background: # fff; color: #000; line-height: 30px;} input {font: 12px "microsoft yahei"; background: # fff; color: #000 ;}radio {margin-right: 20px ;}. grid {display:-webkit-box; display: box ;}. col-0 {-webkit-box-flex: 0; box-flex: 0 ;}. col-1 {-webkit-box-flex: 1; box-flex: 1 ;}. fl {float: left ;}. fr {float: right ;}

Js:

Page ({data: {showModalStatus: false}, powerDrawer: function (e) {var currentStatu = e. currentTarget. dataset. statu; this. util (currentStatu)}, util: function (currentStatu) {/* animation Part * // Step 2: create an animation instance var animation = wx. createAnimation ({duration: 200, // Animation duration timingFunction: "linear", // linear delay: 0 // 0 without latency}); // Step 1: this animation instance is assigned to the current animation instance this. animation = animation; // Step 4: execute the first animation. opacity (0 ). rotateX (-100 ). step (); // step 2: export the animation object to save this. setData ({animationData: animation. export ()}) // Step 2: After the timer is set to the specified time, execute the second animation setTimeout (function () {// execute the second animation. opacity (1 ). rotateX (0 ). step (); // The first group of animations stored for the data object. this is the animation object after the second group of animations is executed. setData ({animationData: animation}) // close if (currentStatu = "close") {this. setData ({showModalStatus: false });}}. bind (this), 200) // Display if (currentStatu = "open") {this. setData ({showModalStatus: true });}}})

Run:

The above is a detailed description of the example of the mini-program custom mode pop-up window. For more information, see other related articles in the first PHP community!