Applets development – How to locate transparent elements in active popovers

The requirement is: our pop-up layer is just an image that triggers a click callback when the user clicks on a particular location.

The idea is to create a transparent element, place it in the image container, and position it in the relevant position.

The problem is: different models have different sizes, so how do you ensure that transparent elements are positioned correctly?

The solution: harmonize weights and measures

example

As shown in the picture, we have two buttons to locate [click my offer to upgrade] and [Cruel Reject].

First, just need to solve the problem of setting the size of the background image container, transparent element positioning is also solved.

This is about the representation of two child elements in a container that are absolutely located in the parent element

❓ We tend to give elements aspect ratios in terms of percentage width as width and percentage height as height.

❓ But later models, such as the IPHONE X, have larger aspect ratios. That means the screen is longer than it is wider.

This can result in the right image size ratio on some models and not on others.

// for example ❌. Image container {width: %; Height: %; } // or ❌. Image container {width: % width vw; Height: percentage high vh; }. Transparent element {//... Child absolute parent phase localization}Copy the code

1. Use aspect ratio as a unit of width and height for performance on different models

You can see first that the background image is not fully displayed (especially at the top), and second that the position of the buttons (red and green blocks) is incorrectly positioned

The solution is simple

// ✅ just change the unit. Image container {width: percentage width vw; Height: a high percentage vw; }. Transparent element {//... Child absolute parent phase localization}Copy the code

2. Use width as a unit of width and height for performance on different models

You can see that the scale of the background image is correct and the position of the buttons is basically the same

So whether the aspect ratio of the device is 3:9 or 3:10… As long as the same reference value is used to set the size, the aspect ratio of the container will not change, and the positioning of the inner child elements will not change.

Second, here is the complete view + CSS structure

The view structure

<view id='part-pay-modal' a:if="{{pageLoad}}">
    <! 1 - - - >
    <view a:if="{{ show1 }}" class="part-pay-modal" onTap="handleHideModal">// The image container is the parent element<view class="part-pay-1-modal-content">// Transparent elements are child elements<view class="part-pay-content-get" onTap='userClickGet'></view>
            <view class="part-pay-content-cancel" onTap='userClickReject'></view>
        </view>
        <text class="iconfont icon-clear"></text>
    </view>
</view>
Copy the code

CSS structure

/* Mask the entire background */

#part-pay-modal .part-pay-modal {
    background-color: rgba(0.0.0.0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 999;
}

/* Background image container */

#part-pay-modal .part-pay-1-modal-content {
    position: relative;
    background: url('/images/partPay/part-pay-modal-1.png') center no-repeat;
    background-size: 100%auto; // 🔴 here we use the original scale of the image to set the width and height; And use a uniform unit VW or other may be used. ✅width: 85vw; 
    ✅height: 113vw; } // ✅ The rest of the child can be located according to the parent phase/* Transparent button 1 XXXXX */

#part-pay-modal .part-pay-content-get {
    position: absolute; 
    left: 15%;
    right: 15%;
    top: 75%;
    height: 12%;
    z-index: 99;
}

/* Transparent button 2 XXXXX */

#part-pay-modal .part-pay-content-cancel {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 89%;
    height: 12%;
    z-index: 99;
}

/* Close the icon */

#part-pay-modal .icon-clear {
    opacity: 0.5;
    color: var(--color-white);
    font-size: 0.6 rem;
    position: absolute;
    right: 7.8 vw;
    top: 18vw;
    z-index: 99;
}
Copy the code

Finally I looked back and thought, there must be a better plan.. Hope readers!

Don’t hesitate to give advice!