html修改弹窗样式,自定义弹窗Style样式_html/css_WEB-ITnose

最新推荐文章于 2024-11-09 14:45:12 发布
最新推荐文章于 2024-11-09 14:45:12 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： html修改弹窗样式
这篇博客介绍了如何自定义HTML alert弹窗样式，以适应网站风格，特别是解决了IE6下的SELECT遮罩问题，并提供了支持圆角的谷歌浏览器样式。通过创建CSS和JavaScript函数`alertMsg`来实现弹窗，该函数接受消息内容和模式参数，允许创建一个或两个按钮的弹窗。代码示例展示了如何使用和调用这个自定义弹窗。
摘要由CSDN通过智能技术生成

5268f80b9b1e01f982625ef6fac83ca1.png

由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS

但是还是自己写的比较放心，顺便练习一下对DOM的操作

支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式

听取建议后，修改了position:fixed, IE6下用hack处理了。

点击看效果:

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

所需CSS：

使用方法，直接调用函数，传递所需定义的信息，支持定义是否有取消键：

alertMsg(msg, mode) //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

函数代码：添加了一个获取窗口尺寸的函数，又长长了很多，可以把获取窗口的尺寸另外立一个函数放公共库里面，这里只是为了方便演示，写到一个函数里面

function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮 msg = msg || '

最低0.47元/天 解锁文章
ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/c
zm_miner的博客
02-02 1万+
当我把所有资源都放在src下面的时候, 执行npx webpack-dev-server打包成功, 当划分js, css, imgs 文件夹以后, 报错 ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/index.less) Module build failed (from ../node_modules/less-loader.
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS库，用于构建响应式和可自定义的页面布局 文献资料 有关完整文档，请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout.css导入模块 ...
HTML自定义弹框.html
05-08
这是一个简单的HTML Demo，实现了点击按钮后出现一个遮罩层，在层上实现弹框效果，在框中可以自定义消息，或者内容。
html更改弹窗样式（原创，转载需声明）
weixin_33923762的博客
02-26 2107
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5学堂 - alert</title> </head> <body> <script> w...
HTML/CSS/JavaScript实现div弹出框指南
最新发布
weixin_34618526的博客
11-09 1591
本文还有配套的精品资源，点击获取 简介：在网页设计中，"div 弹出框"是一种用于提供额外信息或接收用户输入的交互元素。它涉及多个技术要点，包括CSS定位、层叠上下文、JavaScript事件触发、动画效果、模态与非模态设计、响应式布局、ARIA无障碍属性、关闭按钮处理以及内容的动态加载。本文将详细阐述创建自定义div弹出框所需的关键技术和实践，旨在提升网页用户体验。 ...
html弹窗的几种样式,弹窗样式你知道几种？
weixin_36467048的博客
06-28 4935
你能说出几种弹窗的类型吗？弹窗是App与用户进行交互的常见方式之一，不同的弹窗适用于不同的场景，弹窗效果直接影响用户的使用体验。所以明白弹窗的类别，合理使用弹窗是很有必要的。弹窗类别弹窗又称为对话框，分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作。(告诉内容并让其操作)非模态弹窗则不会影响用户的操作...
html+js实现自定义弹窗
qq_55112725的博客
03-02 1640
html+js实现自定义弹窗 html+js实现自定义弹窗，可以将后台数据渲染到弹窗里面。点击打开弹窗按钮，显示弹窗和数据。弹窗可自定义数据，样式，背景图等
设定自动弹窗html,javascript如何设置弹窗？
weixin_31139479的博客
05-31 1549
我们在浏览网页时，经常会遇到网页弹出弹窗，我们可以在JavaScript中创建三种消息框：警告框、确认框、提示框。下面我们来看一下这三种弹框的设置方法。JavaScript设置弹出框的方法：警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法window.alert("sometext");window.alert() 方法可以不带上window...
css样式无法加载Refused to apply style from ‘http://localhost:8080/static/css/style.css’ because its MIME
01-20
在开发Web应用时，我们经常会遇到“Refused to apply style from ‘URL’ because its MIME type is not a supported stylesheet MIME type”的错误，这个问题通常涉及到CSS样式表的加载问题。在这个具体的案例中，...
CSSsc.rar_java web_动态表格 html_样式表_浏览器_网页设计
09-14
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式，例如标题<h1>、段落<p>、表格<table>、链接...
html弹框
夜空繁星VV
04-14 3457
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin: 0px; } .zhezhao{ position: fixed; left: 0px; top: 0px; background: #0
html 手机端自定义弹窗效果
07-04
html 手机端自定义弹窗效果
javascript+html5+css3自定义弹出窗口效果
10-19
主要为大家详细介绍了javascript+html5+css3自定义弹出窗口效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
各种弹出框样式
05-06
各种弹出框样式
漂亮的html弹出层弹出窗口
09-20
漂亮的弹出层，弹出窗口的jquery方法，forZDialogDemo.html为演示页面，为普通的html开发提供便利，非常方便，漂亮，适用于各种浏览器，兼容性好
html弹窗页面19种
02-09
html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种
HTML+CSS弹窗样式代码参考
2302_81102200的博客
09-19 791
电脑的比这个要宽，占屏幕80%，这里就不做展示了。
HTML 常见的JS弹窗
YGRQG的博客
02-02 8411
HTML 常见的三种JS弹窗
使用html、css、js制作一个简单且草率的弹出提示框
Z_B_L的博客
09-09 5650
对于刚接触html5和css3的新手来说，alert弹出窗弊端不仅会阻止程序的执行，并且看起来十分简陋，不美观，视觉效果和实用性都不好，所以今天我将为大家展示：如何使用html和css、js制作一个简单的弹出窗。（ps：本篇为纯新手打造，恳请大佬多多批评）首先是html结构，一个弹窗，一个按钮。然后是css，设置背景，弹窗样式。根据个人需要可调整弹窗的事件。
css3蒲公英飘动效果_css3 云朵飘动效果动画_html/css_WEB-ITnose
04-27
您想了解CSS3蒲公英飘动效果和CSS3云朵飘动效果动画的具体实现方法吗？我可以为您提供一些简单的代码示例和实现步骤。 首先，让我们来看一下CSS3蒲公英飘动效果的实现方法。下面是一个简单的实例代码： ```html <!DOCTYPE html> <html> <head> <title>CSS3蒲公英飘动效果</title> <style> /* 设置body的背景颜色和字体颜色 */ body { background-color: #34AADC; color: #fff; } /* 设置蒲公英的样式 */ .dandelion { position: absolute; width: 30px; height: 30px; background-image: url("https://cdn.pixabay.com/photo/2014/04/03/10/30/dandelion-310807_960_720.png"); background-size: 100% 100%; animation: dandelion 5s linear infinite; } /* 设置蒲公英飘动的动画 */ @keyframes dandelion { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(500px, -500px); opacity: 0.5; } 100% { transform: translate(1000px, -1000px); opacity: 0; } } </style> </head> <body> <div class="dandelion"></div> </body> </html> ``` 在这个示例中，我们使用了CSS3的动画属性`animation`和关键帧`@keyframes`来实现蒲公英的飘动效果。我们首先定义了一个类名为`dandelion`的元素，并设置了它的样式，包括背景图片、大小和动画，然后在关键帧中定义了蒲公英的运动轨迹和透明度变化。最后，我们在页面中插入了一个`div`元素，并将它的类名设置为`dandelion`，这样就可以实现蒲公英的飘动效果了。 接下来，我们来看一下CSS3云朵飘动效果的实现方法。下面是一个简单的实例代码： ```html <!DOCTYPE html> <html> <head> <title>CSS3云朵飘动效果</title> <style> /* 设置body的背景颜色和字体颜色 */ body { background-color: #34AADC; color: #fff; } /* 设置云朵的样式 */ .cloud { position: absolute; width: 100px; height: 50px; background-image: url("https://cdn.pixabay.com/photo/2016/09/17/16/26/cloud-1674193_960_720.png"); background-size: 100% 100%; animation: cloud 10s linear infinite; } /* 设置云朵飘动的动画 */ @keyframes cloud { 0% { transform: translate(-100px, 0); } 100% { transform: translate(1000px, 0); } } </style> </head> <body> <div class="cloud"></div> </body> </html> ``` 在这个示例中，我们同样使用了CSS3的动画属性`animation`和关键帧`@keyframes`来实现云朵的飘动效果。我们首先定义了一个类名为`cloud`的元素，并设置了它的样式，包括背景图片、大小和动画，然后在关键帧中定义了云朵的运动轨迹。最后，我们在页面中插入了一个`div`元素，并将它的类名设置为`cloud`，这样就可以实现云朵的飘动效果了。 希望这些代码示例和实现步骤对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值