快利用promt.showDialog接口提供的弹框只能显示文字、按钮简略的元素，无奈实现简单的页面成果。但往往产品经理设计的弹框页面成果很炫，怎么办呢？
比方实现如下弹窗成果：展现一个列表，右边显示图片，左边显示具体介绍，见图1；提醒用户查看利用隐衷协定弹窗成果，外面内容有超链接成果，能点击，见图2：
图1 列表弹窗 图2 超链接弹窗
此问题个别是开发者对快利用组件、款式属性应用不相熟导致的。
解决办法
基于stack组件+position:fixed css款式能够实现自定义弹窗，弹窗显示暗藏基于if/show指令来管制，具体代码如下：
初始化数据模型：
` data() {
return { list: [1, 2, 3], isShow: false, ifShow1: false, ifShow2: false }},`页面布局：
`<text onclick="showToast1">自定义弹窗款式1</text>
<text onclick="showToast2">自定义弹窗款式2</text><!-- 弹窗 --><div if="{{isShow}}" class="modal center-modal"> <div class="toast-box password-box"> <block> <stack class="eyes-input-box"> <div style="flex-direction: column;width: 100%;" if="{{ifShow1}}"> <div style="width: 100%;"> <text style="font-size: 32px;font-weight: 500;">交通守法</text> <text style="font-size: 25px;text-align: right;padding-left: 400px" onclick="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;">二级题目</text> <text style="font-size: 26px;margin-top: 10px">相干内容展现，例如商品属性、价格、上架日期等信息展现</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;">城市服务</text> <text style="font-weight: 400;"><span>点击“批准”，即示意您批准上述内容及</span><a style="color: #0000ff;" onclick="toast">利用名称的用户协定</a> <span>、</span><a style="color: #0000ff;" onclick="toast">对于利用名称与隐衷的申明</a></text> <div style="width: 100%;"> <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">确认</text> <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">勾销</text> </div> </div> </stack> </block> </div></div>`页面款式：
`
.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; }}// 弹窗款式.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; 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; } }}}
}
`
事件绑定：
`
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: '查看隐衷协定' })}
`
欲了解更多详情，请参阅：
快利用开发领导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
快利用Style款式：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style
快利用通用款式：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings#h1-1575449213432
原文链接：https://developer.huawei.com/...
原作者：Mayism