alert,confirm弹出窗样式美化

2024-04-30 04:48
文章标签 样式 美化 弹出 alert confirm

本文主要是介绍alert,confirm弹出窗样式美化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在js中，alert是大家用得非常多的一个函数了吧。这个弹出窗口，在ie或是firefox以及google下的表现各自不同。。。

这是firefox下面的。。。

这是我们常见的IE...

今天，我们要向大家介绍的就是如何改变这些弹出窗口的外表，我们以凡客诚品的设计为例子。。。

首先，我们要引进一个脚本，这个脚本的创作者叫showbo，脚本里的变量名字就是这个，不过作者的网站太多弹窗广告了，看到头晕。。。

在这个脚本里，作者先对浏览器进行判断，这也是JQ比JS好的地方吧，至少你不用写那么多代码去兼容浏览器。。。

接着判断浏览器的宽度高度，还有clientWidth,cliendHeigt,scrollWidth,scrollHeight，这些用来判断弹出窗口的位置。。。关于那几个的用法，大家可参见的另一篇文章：http://www.163css.com/hihilinxuan/log/634742698153057500.html

作者创建了一个多层结构ID为dvmsgbox的DIV,弹出的背景色是通过滤镜解决的，我们要修改弹出层的样式就是根据这个div来写样式的。。。

这是凡客诚品的弹窗提示，挺漂亮的，我们借用它的设计。。。

以下是我制作的效果截图：

以下我提供源文件，欢迎有需要的朋友下载使用：

预览地址：http://www.163css.net/net163/cssjs/2012/06/alert/index.html

下载地址：类似凡客诚品的alert,confirm弹出窗样式美化.zip

这篇关于alert,confirm弹出窗样式美化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/947944。

相关文章

vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
Python使用Colorama库美化终端输出的操作示例

Python使用Colorama库美化终端输出的操作示例

《Python使用Colorama库美化终端输出的操作示例》在开发命令行工具或调试程序时,我们可能会希望通过颜色来区分重要信息,比如警告、错误、提示等,而Colorama是一个简单易用的Python库... 目录python Colorama 库详解：终端输出美化的神器1. Colorama 是什么？2.
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
在项目开发中，jsp页面不会少了，如何公用页面（添加页面和修改页面）和公用样式代码（css，js）？

在项目开发中，jsp页面不会少了，如何公用页面（添加页面和修改页面）和公用样式代码（css，js）？

在项目开发中，如何公用添加页面和修改页面？ <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><title>岗位设置</title><%@ include file="/WEB-INF/jsp/public/common.jspf"%></head><body> <!-- 标
阅读更多...
纯css实现checkbox的checked样式

纯css实现checkbox的checked样式

纯css也能实现checked样式 今天使用微信的WEUI的checkbox的时候，发现点击checkbox是有checked和unchecked的变化的，但是想要去获得checkbox的checked状态时，发现event listener里居然没有该checkbox的click之类的事件。这才发现，weui只是纯粹的css样式，没有对应组件的js代码。那么问题来了，没有js事件，weui是如
阅读更多...
WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性（href之类的）(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单
阅读更多...
Android style(样式)， theme（主题）资源

Android style(样式)， theme（主题）资源

本文内容摘自《疯狂Android讲义 第三版-李刚著作》 样式和主题资源都用于对Android应用进行“美化”，只要充分利用Android应用的样式和主题资源，开发者就可以开发出各种风格的Android应用。 样式资源（style）: 如果我们经常需要对某个类型的组件指定大致相似的格式，比如字体，颜色，背景色等，如果次都要为View组件重复指定这些属性，无疑会有大量的工作量，而且不利于项目后
阅读更多...
鼠标移入移出，样式修改，显示隐藏提示消息

鼠标移入移出，样式修改，显示隐藏提示消息

重要的有三点： 1.a标签中的ishow是自己定义的属性，自己输入值 2.a:hover表示鼠标移上去时， 3.a:hover:after{content:attr(ishow)}表示鼠标移上去后，显示提示消息 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>实践题 </
阅读更多...
10Python的Pandas：样式Style

10Python的Pandas：样式Style

Pandas 提供了多种样式选项，可以让你对数据框的显示进行格式化。这些样式可以帮助突出显示数据中的某些元素、设置颜色、格式化数字等。以下是一些常用的 Pandas 样式示例： 1. 基本样式设置 要为整个数据框应用样式，可以使用 style 属性。例如，你可以为所有的数值设置显示格式： import pandas as pd# 创建示例数据框df = pd.DataFrame({'A':
阅读更多...
vivado error：Combinatorial Loop Alert：1 LUT cells form a combinatorial loop

vivado error：Combinatorial Loop Alert：1 LUT cells form a combinatorial loop

VIVADO ERROR :Combinatorial Loop Alert：1 LUT cells form a combinatorial loop vivao生成bit流时发生报错，如下图所示定位原因解决 vivao生成bit流时发生报错，如下图所示 定位原因 在三段式状态机中，组合逻辑代码if else 语句未写全只写了if…elsif…,没有写else，导致错误
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2