模态对话框在弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
思路:需要一个遮盖层(mask)和一个对话框(modal)。
1)模板wxml
<text bindtap="introModal">展览介绍</text>
<view class="mask" wx:if="{{showModal}}">
<view class="modal" wx:if="{{showModal}}">
<image class="closeIcon" bindtap="closeModal" src="/images/icon/close.png"></image>
<text>巴洛克时期的西里西亚——波兰弗罗茨瓦夫国立博物馆馆藏精品展</text>
</view>
</view>
2)脚本js
Page({
data: {
showModal: false
},
introModal: function() {
this.setData({
showModal: true
})
},
closeModal: function() {
this.setData({
showModal: false
})
}
})
3)样式wxss
.mask{
position: fixed;
width: 100%;
height: 1334rpx;
background: rgba(0,0,0,.5);
display: flex;
flex-direction: column
justify-content: center;
}
.modal{
display: flex;
flex-direction: column
position: relative;
margin: 0 30rpx;
padding: 20rpx 30rpx 40rpx;
background: white;
border-radius: 5px;
font-size: 26rpx;
line-height: 46rpx;
}
.closeIcon{
position: absolute;
top: 40rpx;
right: 30rpx;
width: 30rpx;
height: 30rpx;
}
4)效果图
参考资料来自:https://blog.csdn.net/yelin042/article/details/80881618