[Huawei Developers] Martin Bieber:
You can run the if/show command to control the display of a pop-up window based on the stack component and the position:fixed CSS file. The following code implements two custom pop-up windows:

1. Initialize data models.

data() {

return {

list: [1, 2, 3],

isShow: false,

ifShow1: false,

ifShow2: false

}

},

2. Set the page layout.

<text onclick="showToast1">Custom pop-up window 1</text>

<text onclick="showToast2">Custom pop-up window 2</text>

<!-- Pop-up window -->

<div if="{{isShow}}" class="modal center-modal">

<div class="toast-box password-box">

<block>

<stack>

<div style="flex-direction: column;width: 100%;" if="{{ifShow1}}">

<div style="width: 100%;">

<text style="font-size: 32px;font-weight: 500;">Traffic violation</text>

<text style="font-size: 25px;text-align: right;padding-left: 400px" onclick="hide">Hide</text>

</div>

<list style="height: 550px">

<list-item type="list" for="list" style="height: 160px;margin-top: 20px">

<div style="padding-top: 1px;">

<image src="/Common/icon.png" style="border-radius: 100%;width: 100px;height: 100px;"></image>

<div style="flex-direction: column; margin-left: 20px">

<text style="font-size: 28px;font-weight: 600;">Level-2 title</text>

<text style="font-size: 26px;margin-top: 10px">Displaying product attributes, prices, release dates, and more.</text>

<div style="height: 2px;background-color:#808080;bottom: 0;margin-top: 25px" if="{{$idx<2}}">

</div>

</div>

</div>

</list-item>

</list>

</div>

<div style="flex-direction: column;width: 100%;" if="{{ifShow2}}">

<text style="font-size: 31px;font-weight: 700;">City services</text>

<text style="font-weight: 400;"><span>By tapping Agree, you agree to the above terms as well as the </span><a style="color: #0000ff;" onclick="toast">XX User Agreement</a>

<span> and </span><a style="color: #0000ff;" onclick="toast">Privacy Statement About XX.</a></text>

<div style="width: 100%;">

<text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">OK</text>

<text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">Cancel</text>

</div>

</div>

</stack>

</block>

</div>

</div>

3. Set the page style.

.container {

flex-direction: column;

justify-content: center;

align-items: center;

.body {

width: 100%;

height: 100%;

flex-direction: column;

align-items: center;

.img {

margin-top: 500px;

}

.txt {

margin-top: 570px;

}

}

// Pop-up window style.

.modal {

position: fixed;

flex-direction: column;

justify-content: flex-end;

width: 100%;

height: 100%;

padding: 0 34px 34px;

background-color: rgba(0, 0, 0, 0.18);

animation-name: Modal;

animation-duration: 130ms;

animation-timing-function: ease-in;

.toast-box {

width: 100%;

padding: 25px 50px 20.8px;

border-radius: 34px;

background-color: white;

flex-direction: column;

.toast-title {

font-size: 41.6px;

line-height: 56px;

font-weight: 500;

font-family: HWtext-65ST;

color: #000000;

}

.toast-tip {

font-family: HWtext-55ST;

font-size: 29px;

color: rgba(0, 0, 0, 0.6);

line-height: 40px;

margin-top: 3.6px;

margin-bottom: 25px;

}

.label-box {

height: 100px;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

.label {

color: #000000;

width: 100%;

font-family: HWtext-55ST;

font-size: 34px;

}

input {

margin-right: -11px;

}

}

.manage {

height: 100px;

font-family: HWtext-65ST;

font-size: 29.12px;

color: #007dff;

font-weight: 500;

}

.cancel {

width: 100%;

height: 75px;

margin-top: 37.44px;

text-align: center;

font-family: HWtext-65ST;

font-size: 33.28px;

color: #007dff;

font-weight: 500;

}

.btn-box {

justify-content: space-between;

align-items: center;

.bind {

width: 47%;

height: 60px;

border-radius: 10px;

font-family: HWtext-65ST;

text-align: center;

font-size: 33.28px;

color: #007dff;

margin: 16px 0;

font-weight: 500;

}

.line {

height: 50px;

width: 1px;

background-color: rgba(0, 0, 0, 0.2);

}

.quit {

width: 47%;

height: 60px;

border-radius: 10px;

text-align: center;

font-family: HWtext-65ST;

font-size: 33.28px;

color: #007dff;

margin: 16px 0;

font-weight: 500;

}

.bind:active {

background-color: rgba(0, 0, 0, 0.1);

}

.quit:active {

background-color: rgba(0, 0, 0, 0.1);

}

}

.nocar-tip {

height: 99.84px;

font-size: 33.28px;

font-family: HWtext-55ST;

color: #000000;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

}

.password-box {

margin-top: -110px;

padding: 30.63px 50px 20.8px;

.toast-title {

height: 55.64px;

margin-bottom: 30.12px;

}

.password-tip {

flex-direction: column;

margin-top: 3.6px;

margin-bottom: 25px;

.control-tip {

font-family: HWtext-55ST;

font-size: 24.96px;

color: rgba(0, 0, 0, 0.6);

}

}

.error-password-tip {

font-family: HWtext-55ST;

font-size: 24.96px;

color: #fa2a2d;

height: 32.76px;

margin-bottom: 37.4px;

margin-top: 0;

}

.btn-box {

.bind {

margin-top: 8px;

margin-bottom: 8px;

}

.quit {

margin-top: 8px;

margin-bottom: 8px;

}

}

.eyes-input-box {

width: 100%;

flex-direction: row;

justify-content: flex-end;

.input-password {

width: 100%;

height: 94.64px;

border: 1px solid #ffffff;

border-bottom-color: #000000;

padding: 11.44px 0;

margin-bottom: 20.8px;

}

.password-text {

width: 100%;

height: 94.64px;

padding: 11.44px 0;

border-bottom: 1px solid #000000;

margin-bottom: 20.8px;bind:active {

color: #000000;

font-size: 36px;

}

.eyes-img {

width: 49.92px;

height: 49.92px;

margin-top: 23px;

}

}

.password-loading-box {

flex-direction: row;

align-items: center;

justify-content: space-between;

height: 150px;

.loading-text {

font-family: HWtext-55ST;

font-size: 33.28px;

color: rgba(0, 0, 0, 0.96);

}

.loading-circular {

width: 102px;

height: 102px;

color: #666666;

}

}

}

}

}

4. Bind an event.

showToast1() {

this.isShow = true;

this.ifShow1 = true

this.ifShow2 = false

},

showToast2() {

this.isShow = true;

this.ifShow1 = false

this.ifShow2 = true

},

hide(){

this.isShow = false;

},

toast() {

prompt.showToast({

message: 'View privacy agreement'

})

}

How can I read the global variables defined in app.ux from a JavaScript file?

For example, You can define the variable AppData in app.ux.

data: {

AppData: '123456',

}

The code in the JavaScript file is as follows:

export default {

getAppData() {

return getApp().$def.data.AppData

}

}

For more information, please refer to the Common methods section in Script.