js Dialog 去掉右上角的 'X' 功能

再用到 dialog弹出框时,不想要右上角的X 关闭功能,只是做个提示信息显示。

在网上找了一些资料。网上找了三种解决方案:【第一种是可用的。】

1、

    $("#div1").dialog({

                     closeOnEscape:false,

                     open:function(event,ui){$(".ui-dialog-titlebar-close").hide();}

});

不希望用户通过jquery dialog 提供的x按钮关闭弹出框,这种方法的作用就是除非我提供了关闭按钮,不然是没办法关掉这个对话框的。


2、dialog 中 添加 dialogClass:"no-close"   ---------------屏蔽掉右上角的X功能 (我用过了不好用)


3、找到 dialog 弹出框后找到 "x" 的样式,隐藏掉  -------$(".ui-log").hide();  (我用过了也不好用)

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要自定义 Dialog 组件的上角功能,您需要使用 Vue.js 的插槽(slot)功能Dialog 组件的一些属性。以下是一个简单的示例: ```html <template> <div class="dialog"> <div class="header"> <span class="title">{{ title }}</span> <div class="actions"> <slot name="header"></slot> <button class="close-btn" @click="closeDialog">X</button> </div> </div> <div class="body"> <slot></slot> </div> </div> </template> <script> export default { props: { title: { type: String, default: '' } }, methods: { closeDialog() { // 触发关闭对话框事件 this.$emit('close'); } } }; </script> <style scoped> .dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ddd; padding: 20px; z-index: 999; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .title { font-size: 20px; } .actions { display: flex; align-items: center; } .close-btn { border: none; outline: none; background-color: transparent; font-size: 24px; margin-left: 20px; cursor: pointer; } </style> ``` 在这个示例中,我们定义了一个名为`header`的插槽,用于放置自定义功能按钮。我们还定义了一个名为`close`的事件,用于在点击关闭按钮时触发。 要使用这个 Dialog 组件,您可以这样写: ```html <template> <div> <button @click="showDialog">打开对话框</button> <Dialog :title="title" @close="closeDialog"> <p>这是对话框的内容</p> <template #header> <button @click="doSomething">自定义按钮</button> </template> </Dialog> </div> </template> <script> import Dialog from './Dialog.vue'; export default { components: { Dialog }, data() { return { title: '对话框标题', showDialog: false }; }, methods: { closeDialog() { this.showDialog = false; }, doSomething() { alert('自定义按钮被点击了'); } } }; </script> ``` 在这个示例中,我们使用了`<template>`标签来定义一个名为`header`的插槽,并在其中放置了一个自定义按钮。当用户点击这个按钮时,点击事件将由父组件处理。 希望这可以帮助您自定义 Dialog 组件的上角功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值