根据提供的引用内容，可以看出JS中的show
Modal有两种不同的实现方式。
1. uniapp中自定义show
Modal样式
在uniapp中，可以通过自定义show
Modal样式来实现弹窗效果。具体实现方法如下：
1）在main.js中引入show-
modal组件
```javascript
import show
Modal from '@/components/show-
modal/show-
modal.vue'
Vue.component('show-
modal', show
Modal)
```
2）在页面中使用show-
modal组件
```html
<show-
modal :is-show="isShow
Modal" :title="
modalTitle" :content="
modalContent" @confirm="confirm
Modal" @cancel="cancel
Modal"></show-
modal>
```
其中，isShow
Modal为控制弹窗显示的变量，
modalTitle为弹窗标题，
modalContent为弹窗内容，confirm
Modal和cancel
Modal为点击确认和取消按钮时触发的事件。
3）在show-
modal.vue中定义弹窗样式和事件
```html
<template>
<div class="
modal" v-show="isShow">
<div class="
modal-mask"></div>
<div class="
modal-container">
<div class="
modal-header">{{ title }}</div>
<div class="
modal-body">{{ content }}</div>
<div class="
modal-footer">
<button class="
modal-confirm" @click="confirm">确认</button>
<button class="
modal-cancel" @click="cancel">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
}
},
methods: {
confirm() {
this.$emit('confirm')
},
cancel() {
this.$emit('cancel')
}
}
}
</script>
<style>
.
modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.
modal-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.
modal-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
}
.
modal-header {
padding: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: #f5f5f5;
}
.
modal-body {
padding: 20px;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
.
modal-footer {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.
modal-confirm,
.
modal-cancel {
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}
.
modal-confirm {
margin-right: 10px;
background-color: #409eff;
color: #fff;
}
.
modal-cancel {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
}
</style>
```
2. window.show
ModalDialog()和window.show
ModelessDialog()
另一种实现方式是使用window对象的show
ModalDialog()和show
ModelessDialog()方法。这两个方法可以在IE浏览器中使用，但在其他浏览器中不被支持。
show
ModalDialog()方法可以打开一个模态对话框，即用户必须关闭对话框后才能继续操作页面。show
ModelessDialog()方法可以打开一个非模态对话框，即用户可以在对话框和页面之间自由切换。
这两个方法的使用方法如下：
```javascript
vReturnValue = window.show
ModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.show
ModelessDialog(sURL [, vArguments] [,sFeatures])
```
其中，sURL为要打开的对话框的URL地址，vArguments为传递给对话框的参数，sFeatures为对话框的特性，例如大小、位置、工具栏等。
3577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
