ShowModal 和 Show 的区别

Show:

Use Show to set the form Visible property to true and to bring the form to the front of other forms on the screen.

ShowModal:
Use ShowModal to show a form as a modal form.  A modal form is one where the application can continue to run until the form is closed. Thus, ShowModal does not return until the form closes. When the form closes, it returns the value of the ModalResult property.

翻译成中文大概意思是:
Show仅仅是让一个窗口显示出来,比如在Form1中让Form2->Show(),那么在Form2显示之后你还可以继续点击Form1的东西。
而ShowModal是把窗口当成模式窗口显示,意味着程序只能在这个窗口关闭以后才继续执行下面的语句,比如在Form1中让Form2->ShowModal();那么在Form2关闭之前,Form1是不可用的。
根据提供的引用内容,可以看出JS中的showModal有两种不同的实现方式。 1. uniapp中自定义showModal样式 在uniapp中,可以通过自定义showModal样式来实现弹窗效果。具体实现方法如下: 1)在main.js中引入show-modal组件 ```javascript import showModal from '@/components/show-modal/show-modal.vue' Vue.component('show-modal', showModal) ``` 2)在页面中使用show-modal组件 ```html <show-modal :is-show="isShowModal" :title="modalTitle" :content="modalContent" @confirm="confirmModal" @cancel="cancelModal"></show-modal> ``` 其中,isShowModal为控制弹窗显示的变量,modalTitle为弹窗标题,modalContent为弹窗内容,confirmModal和cancelModal为点击确认和取消按钮时触发的事件。 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.showModalDialog()和window.showModelessDialog() 另一种实现方式是使用window对象的showModalDialog()和showModelessDialog()方法。这两个方法可以在IE浏览器中使用,但在其他浏览器中不被支持。 showModalDialog()方法可以打开一个模态对话框,即用户必须关闭对话框后才能继续操作页面。showModelessDialog()方法可以打开一个非模态对话框,即用户可以在对话框和页面之间自由切换。 这两个方法的使用方法如下: ```javascript vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) ``` 其中,sURL为要打开的对话框的URL地址,vArguments为传递给对话框的参数,sFeatures为对话框的特性,例如大小、位置、工具栏等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值