开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js dialog 按钮样式

JavaScript中的对话框（dialog）通常是通过<dialog>元素或者使用库如jQuery UI来实现的。按钮样式可以通过CSS来自定义，以满足不同的设计需求。

基础概念

<dialog>元素：HTML5中引入的一个新元素，用于创建一个对话框或弹出窗口。
CSS样式：用于定义HTML元素的视觉表现。

相关优势

可访问性：使用标准的HTML5 <dialog>元素可以提高页面的可访问性。
灵活性：CSS允许开发者高度定制按钮的外观和行为。
兼容性：结合现代浏览器支持的<dialog>元素和Polyfill，可以在大多数现代浏览器中使用。

类型

模态对话框：阻止用户与页面其余部分交互，直到对话框关闭。
非模态对话框：允许用户在对话框打开时与页面其他部分交互。

应用场景

警告和确认：在执行重要操作前获取用户的确认。
表单输入：收集用户信息。
设置选项：允许用户更改应用的设置。

示例代码

以下是一个简单的例子，展示了如何使用<dialog>元素和CSS来自定义按钮样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Dialog Buttons</title>
<style>
  dialog {
    width: 300px;
    border: none;
    box-shadow: 0 9px 18px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .dialog-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
  }
  .dialog-button-secondary {
    background-color: #f44336; /* Red */
  }
</style>
</head>
<body>

<dialog id="myDialog">
  <p>This is a dialog box.</p>
  <button class="dialog-button" id="confirmBtn">Confirm</button>
  <button class="dialog-button dialog-button-secondary" id="cancelBtn">Cancel</button>
</dialog>

<button id="openDialogBtn">Open Dialog</button>

<script>
  const dialog = document.getElementById('myDialog');
  const openDialogBtn = document.getElementById('openDialogBtn');
  const confirmBtn = document.getElementById('confirmBtn');
  const cancelBtn = document.getElementById('cancelBtn');

  openDialogBtn.addEventListener('click', () => {
    dialog.showModal();
  });

  confirmBtn.addEventListener('click', () => {
    alert('Confirmed!');
    dialog.close();
  });

  cancelBtn.addEventListener('click', () => {
    alert('Cancelled!');
    dialog.close();
  });
</script>

</body>
</html>

遇到的问题及解决方法

问题：对话框按钮的样式没有按预期显示。原因：可能是CSS选择器不正确，或者CSS样式被其他样式覆盖。 解决方法：

检查CSS选择器是否正确指向了按钮元素。
使用浏览器的开发者工具检查按钮的实际应用样式，查看是否有其他样式规则影响了按钮的外观。
确保CSS样式的优先级足够高，可以通过增加!important来强制应用样式，但应谨慎使用。

通过上述方法，可以有效地自定义JavaScript对话框中的按钮样式，并解决可能出现的样式问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

android 设置系统dialog 样式

1、编写一个文本样式。 DIALOG的标题是一个textview，在sytles.xml中，添加如下代码来设置你自己的文本样式：　　? 　　...上面的标题文本并不能直接设置为对话框的标题样式。我们还需要编写一个表示标题的主题的style，在这里指定标题的文本样式。代码如下：　　? 　　...--Dialog主题--> 　　Dialog" parent="@android:style/Theme.DeviceDefault.Light.Dialog...如把parent指定为Theme.DeviceDefault.Dialog.Alert，Theme.Holo.Dialog.Alert，Theme.DeviceDefault.Light.Dialog.Alert...它是定义在各种风格的dialog的layout当中，然后再在AppTheme里面指定dialog的对应属性。

1.4K2 0

圆形按钮样式

今天就分享些关于圆的东西(圆形按钮样式)。...d5d5d5 #f2f2f2 绿色 #4caf50 #d5d5d5 #f2f2f2 灰色 #e7e7e7 #d5d5d5 #f2f2f2 黑色 #555555 #d5d5d5 #f2f2f2 红色圆形按钮样式示例

2K2 0

Xamarin.Forms 按钮样式圆角按钮

在 Xamarin 中可以通过 CornerRadius 设置按钮使用圆角在 Xamarin 中可以方便进行样式定义或不进行定义样式只修改属性而改变外观，如按钮的圆角可以通过 CornerRadius...属性设置按钮使用圆角时，如果更改边框的颜色建议同时更改边框的宽度和边框颜色，在不同的平台下默认的样式不相同的，如果想要保持各个平台统一的外观，虽然这样不是好主意，那么请设置固定的值，而不是采用默认值...Transparent" BorderColor="Aquamarine" BorderWidth="2"/> 此时就创建了一个圆角的按钮...因为在 UWP 中 BorderWidth 是 2 而在 Android 中是 0 也就是此时如果干掉了背景颜色，将看不到按钮的圆角 ?...设置按钮背景透明可以通过设置 BackgroundColor 为 Transparent 属性如果需要让按钮点击时呈现有趣的效果，可以通过 VisualStateManager 的方式定义

3.2K2 0

androidのdialog点击按钮不关闭

——高尔基如果想要安卓的dialog点击按钮后默认不关闭弹框，可以这么写 AlertDialog.Builder builder = new AlertDialog.Builder(context...AlertDialog alertDialog = builder.setPositiveButton("保存", null) .setNegativeButton("收藏", (dialog

1.1K4 0

如何修改vant dialog title 的样式

要求：修改vant dialog title 中的日期样式。本来是用dialog组件的title属性，一改就会把整个title的样式改掉。...页面效果 image.png 解决：使用slot 代码 dialog v-model="dateTimePickerShow" show-cancel-button> <slot...v-model="currentDate" :show-toolbar="false" type="datetime" /> dialog

6.9K0 0

按钮样式的正确方式

，让我们定义我们自己的按钮样式。...这是我们想要做的事情：可应用于链接或按钮的“按钮”样式; 我们希望有选择地应用它，因为我们的页面中会有其他链接和按钮样式。这需要一个CSS组件。...脚本后，它会为元素添加一个js-focus-visible类。...我们可以使用它来从没有焦点可见类的焦点元素中移除焦点样式： /* hide focus style if not from keyboard navigation */ .js-focus-visible...不是活动的（例如，如果我们的JS未能加载），则会中断焦点样式。

3.7K2 0

WordPress 后台样式：Button 按钮

上一篇讲了 WordPress 后台样式： Admin Notice 操作提示，今天继续，讲讲 WordPress 后台常用的按钮样式： WordPress 常用到按钮是表单的提交按钮，我们非常简单的使用...第二个参数 $type 是按钮的 CSS class，包含 'primary'，'small' 和 'large'，默认是 'primary'，根据这个值的不同显示不同的样式。...所以后台生成不同样式的按钮就是靠第三个 $type 参数。...其实 WordPress 是会使用这个参数生成： button button-primary：主按钮 button button-large：大按钮 button button-samll：小按钮这几个...class，如果你想把链接改成按钮样式，也可以使用上面的 CSS class，除此之外，WordPress 还提供了下面这2个 class： button-secondary：次按钮 action：按钮处于激活状态

2.5K2 0

bootstrap笔记（三）——按钮样式

--引入bootstrap.js之前一定要先引入jQuery.js文件--> js/jquery.min.js..."> js/bootstrap.js"> 按钮不能点击--> 超大按钮正常大小按钮超小按钮 <a href="https://www.baidu.com

8891 0

dialog使用案例，包含增加按钮关闭弹窗

js--> function dialogInfo(title,width,height,url){ a = top.dialog

1.4K2 0

html.dropdownlistfor_html按钮样式

)是本次的主题,废话不多说了,直接代码: 首先看工具类代码: /// DropDownList 下拉框选择改变，促发事件和防全局刷新(记录) 代码: DropDownList实现可输入可选择 1.js...让@Html.DropDownList显示默认值在使用@Html.DropDownList的过程中,发现它的用法很局限,比如在加载的时候显示设定的默认项或者调整它的显示样式

4.6K2 0

Qt苹果按钮滑动样式绘制

painter.setRenderHint(QPainter::Antialiasing); //使绘制时边缘平滑，qt反走样默认关闭 painter.setPen(Qt::NoPen);//画笔样式...//绘制圆形矩形 painter.restore(); //按钮 painter.save(); painter.setBrush(Qt:...//绘制圆按钮 painter.restore(); } } 鼠标点击进行绘制，按钮从左边滑到右边应该有一个运动状态。这就是定时器。

1.5K4 1

Python 按钮（BUTTON）样式属性说明

Python tkinter 按钮组件用于tkinter GUI里添加按钮，按钮可以添加文本和图像。当按钮按下时，可以执行指定的函数。...") # 设置窗口标题 root.geometry("600x600") # 设置窗口大小注意：是x 不是* '''按钮样式''' # 按钮文字切换...# 按钮图片设置，image=图片变量。...root, text='x轴间距', padx=0) self.button_pady = Button(root, text='y轴间距', pady=10) # 框样式...self.box_style = Label(root, text='按钮框样式：') self.button_relief1 = Button(root, text='边框平坦', relief

4802 0

【Bootstrap】007-全局样式：按钮

一、可作为按钮使用的标签或元素 1、说明为、或元素添加按钮类（button class）即可使用 Bootstrap 提供的样式； 2、演示代码演示：运行结果：二、预定义样式...1、说明使用下面列出的类可以快速创建一个带有预定义样式的按钮； 2、演示代码演示：（默认样式）Default 按钮； 2、演示代码演示： <!

650 0

PyQt5 技术篇-Dialog窗口增加?问号按钮

这个是只设置了关闭按钮的样式： ?...QtCore.Qt.WindowCloseButtonHint 这个是关闭按钮，什么都不指定的话应该是放大缩小按钮都有，指定了关闭按钮后，放大缩小按钮就没有了。...QtCore.Qt.WindowContextHelpButtonHint 这个就是问号按钮，多个按钮用 | 分隔开来。...Dialog.setWindowFlags(QtCore.Qt.WindowCloseButtonHint|QtCore.Qt.WindowContextHelpButtonHint) 这个是设置了关闭按钮和问号按钮的样式

1.4K2 0

Android-对话框Dialog风格、样式全解析

https://blog.csdn.net/qq_43377749/article/details/85035693

6852 0

【BootStrap】栅格系统、表单样式与按钮样式-附有源码

.form-control表单元素样式：常用于、、元素。 .form-inline内联表单样式(用于form元素)：可以使元素一行排列。....checkbox复选框样式 .radio单选框样式 .disabled可以禁用单选框或复选项的文本。...#按钮样式可作为按钮使用的元素：、、 .btn：按钮的全局样式。...、.btn-danger、.btn-link .active按钮激活状态、.disabled按钮禁用状态按钮尺寸：.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮) .btn-block...##尺寸按钮尺寸：.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮) 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block

1.3K1 0

小程序中按钮的样式优化修改

/images/task-icon3.png" /> 已完成 --> wxss样式修改在wxss...样式添加如下代码 .header-box { height: 160px; background-repeat:no-repeat; background-size:100% 100%;

2.1K3 0

Axure RP9 按钮变换样式

屏幕快照 2019-06-04 11.24.26.png 画布拖一个按钮，选择一个填充色新建交互->鼠标悬停屏幕快照 2019-06-04 11.26.17.png 选择填充色屏幕快照 2019-

1.9K3 0

分享鼠标悬停按钮样式表

红色悬停样式表1 /* Red Button */ QPushButton#RedButton { border-radius: 8px; color: white; padding...#f44336; color: white; } QPushButton#RedButton:pressed { background-color: #06AD56; } 红色悬停样式表...#f44336; color: black } QPushButton#RedButton2:pressed { background-color: #06AD56; } 蓝色悬停样式表...#008cba; color: white; } QPushButton#BlueButton:pressed { background-color: #06AD56; } 蓝色悬停样式表...#008cba; color: black } QPushButton#BlueButton2:pressed { background-color: #06AD56; } 绿色悬停样式表

1.4K1 0

组件需要覆盖下面的按钮样式

地图检索组件需要覆盖下面的按钮样式需求：地图组件打开需要覆盖下面的按钮的样式存在的问题：按钮样式显示在地图组件的上方，并且改变层级没有用我的思路：一直在用那个z-index，想改变样式。...但是就是改变不了解决方案：是在按钮添加v-show,里面定义一个变量，接着设置bm-local-search里面的方法，方法里面写与设置的变量相反的值。...思路差异：我一直在纠结的是z-index层级的变化，而不是换一个思维去考虑按钮的显示，还有就是没考虑是这个组件bm-local-search的调用方法，这是我没有想到的一个点，也是我最早排除的一个思维。...-- 地图弹出框 --> dialog :visible.sync="mapDialogVisible" :show-close="true" width...showFooterButtons" @click="mapCancelAndClose" >取消</el-button > dialog

1311 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭