弹框要求:
1、弹框图片宽高不限制,自适应
2、关闭按钮固定在图片下方
3、长图时弹框图片可滚动,遮罩层固定
4、点击遮罩层可关闭按钮,不冒泡
图例:
代码
<div class="image-modal" v-if="curSideImg"><div class="modal-overlay" @click.self="curSideImg=''"><div class="modal-container"><img :src="curSideImg" class="modal-image" /><div class="modal-close-btn" @click="curSideImg=''">X</div></div></div>
</div>
.image-modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;
}.modal-overlay {// position: absolute;// top: 0;// left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);overflow: auto;display: flex;justify-content: center;padding: 40px 20px;box-sizing: border-box;
}.modal-container {position: relative;max-width: 90%;margin: auto;
}// .modal-image {
// max-width: 100%;
// display: block;
// margin: 0 auto;
// }
.modal-close-btn{position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);width: 40px;height: 40px;border-radius: 50%;background-color: #fff;font-size: 24px;line-height: 40px;text-align: center;color: #333;
}