2. WeChat applet - custom popup

Reference: https://blog.csdn.net/zhuyb829/article/details/73349295

Since the setting style of the modal box that comes with the applet will be messy, you have to customize the modal box and paste the relevant code for later use.

1. Page

<!--sos modal box-->
                <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modal.sos}}"></view>
                <view class="modal-dialog" wx:if="{{modal.sos}}">
                    <view class="modal-title">SOS/Family Number</view>
                    <view class="modal-content">
                        <view class='modal-input-content'>
                            <view class='modal-input-title'><text>号码1:</text></view>
                            <input class="modal-input" placeholder-class="input-holder" type="number" maxlength="19" bindinput="inputChange" class="input" placeholder="{{hint}}"></input>
                        </view>
                        <view class='modal-input-content'>
                            <view class='modal-input-title'><text>号码2:</text></view>
                            <input class="modal-input" placeholder-class="input-holder" type="number" maxlength="19" bindinput="inputChange" class="input" placeholder="{{hint}}"></input>
                        </view>
                        <view class='modal-input-content'>
                            <view class='modal-input-title'><text>号码3:</text></view>
                            <input class="modal-input" placeholder-class="input-holder" type="number" maxlength="19" bindinput="inputChange" class="input" placeholder="{{hint}}"></input>
                        </view>
                    </view>
                    <view class="modal-footer">
                        <view class="btn-cancel" bindtap="sosCancel" data-status="cancel">取消</view>
                        <view class="btn-confirm" bindtap="sosConfirm" data-status="confirm">确定</view>
                    </view>
                </view>

 

2.css

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 9999;
  background: #fff;
  margin: -180rpx 105rpx;
  border-radius: 10rpx;
}

.modal-title {
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  font-size: 36rpx;
  line-height: 36rpx;
  color: #030303;
  text-align: center;
  background-color: #FF9106;
}

.modal-content {
  padding: 0rpx 26rpx 26rpx 26rpx;
}

.modal-input-content{
    display: flex;
    flex-direction: row;
    margin-top: 26rpx;
}

.modal-input-title {
    font-size: 28rpx;
    line-height: 30rpx;
    padding-top: 26rpx;
}

.modal-input {
  display: flex;
  background: #fff;
  font-size: 28rpx;
}


.input {
  width: 74%;
  height: 82rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  padding: 0 5rpx;
  box-sizing: border-box;
  color: #333; 
  border: 1rpx solid #FF9106;
  border-radius: 10rpx;
  margin-left: 10rpx;
}

input-holder {
  color: #666;
  font-size: 28rpx;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}

.btn-cancel {
  width: 50%;
  color: #fff;
  text-align: center;
  border-right: 1px solid #dedede;
  background-color: #FF9106;
}

.btn-confirm {
  width: 50%;
  color: #fff;
  text-align: center;
  background-color: #FF9106;
}

The pop-up of the modal box needs to correspond to the modal.sos control in the js file of the page. If it pops up, it is enough to bind the relevant event definition method. As for the fact that the mask page mentioned in the reference blog will move, I haven't encountered it here. It may be because the project in my hand is because the tab is customized.