In addition to using the promt.showDialog API, how can I implement custom pop-up windows? - Huawei Developers

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:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.