javascript实现自定义弹窗

最新推荐文章于 2021-06-29 18:22:38 发布
最新推荐文章于 2021-06-29 18:22:38 发布
阅读量905 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012841667/article/details/52541633
版权 
<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;">cssText 的本质就是设置 HTML 元素的 style 属性值。</span>

<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;">在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：</span>
</span>
<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"></span><div id="code42626" class="codebody" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;">document.getElementById("d1").style.cssText = "color:red; font-size:13px;";</div><div id="code42626" class="codebody" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><br style="margin: 0px; padding: 0px;" />alert(document.getElementById("d1").style.cssText);</div><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"> </p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;">在 IE 中值为：FONT-SIZE: 13px; COLOR: red。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;">
</p>
<img src="https://img-blog.csdn.net/20160914214809420?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>dialog</title>
	
</head>
<body>
	<button id="id" οnclick="createMessTipWin(param)">按钮</button>
	<div id="myList"></div>
<span style="white-space:pre">	</span><script type="text/javascript">
	/**
<span style="white-space:pre">	</span>* by nacky.long
 <span style="white-space:pre">	</span>* 创建自定义弹窗
 <span style="white-space:pre">	</span>* @param param
 <span style="white-space:pre">	</span>* 参数结构：
 <span style="white-space:pre">	</span>param = {
            title:'提示',
            tips:"没有任何提示信息！",
            btnOk:'是',
            btnNo:'否',
            funcOk:function () {
            },
            funcNo:function () {
            }
        }
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>function createMessTipWin(param) {

    <span style="white-space:pre">		</span>if (arguments.length==0) {
       <span style="white-space:pre">		</span> param = {
            <span style="white-space:pre">		</span>title:'友情提示',
            <span style="white-space:pre">		</span>tips:"没有任何提示信息！",
           <span style="white-space:pre">		</span> btnOk:'是',
            <span style="white-space:pre">		</span>btnNo:'否',
            <span style="white-space:pre">		</span>funcOk:function () {
           <span style="white-space:pre">		</span> },
            <span style="white-space:pre">		</span>funcNo:function () {
            <span style="white-space:pre">		</span>}
        <span style="white-space:pre">	</span>}
    <span style="white-space:pre">	</span>}
    <span style="white-space:pre">	</span>var tipWinObj = document.createElement("div");
   <span style="white-space:pre">	</span> tipWinObj.style.cssText = "position:fixed;z-index:9999;width:300px; height:auto; overflow:hidden;background-color:white; border:solid 1px #231234;padding-bottom:10px;";
    <span style="white-space:pre">	</span>tipWinObj.style.top = '30%';
    <span style="white-space:pre">	</span>tipWinObj.style.left = '40%';

   <span style="white-space:pre">	</span> var topDiv = document.createElement("div");
    <span style="white-space:pre">	</span>topDiv.style.cssText = "height;30px; line-height:30px; font-size:14px;background-color:#231234;color:white;";
<span style="white-space:pre">	</span>
   <span style="white-space:pre">	</span> var titDiv = document.createElement("div");
    <span style="white-space:pre">	</span>titDiv.style.cssText = "float:left; width:80%;margin-left:5px;";
    <span style="white-space:pre">	</span>titDiv.innerHTML = param.title;

    <span style="white-space:pre">	</span>var cross = document.createElement("div");
    <span style="white-space:pre">	</span>cross.style.cssText = "float:right; cursor:pointer;margin-right:5px;";
    <span style="white-space:pre">	</span>cross.innerHTML = 'X';

    <span style="white-space:pre">	</span>var clearDiv = document.createElement("div");
    <span style="white-space:pre">	</span>clearDiv.style.cssText = "clear:both";

    <span style="white-space:pre">	</span>var contentDiv = document.createElement("div");
    <span style="white-space:pre">	</span>contentDiv.style.cssText = "height:auto; overflow:hidden; line-height:24px;padding:0px 10px 10px;text-align:center;margin-top:10px;";
    <span style="white-space:pre">	</span>contentDiv.innerHTML = param.tips;

    <span style="white-space:pre">	</span>var okBtn = document.createElement("button");
    <span style="white-space:pre">	</span>okBtn.style.cssText = "float:right; width:50px; margin-right:10px;cursor:pointer ";
    <span style="white-space:pre">	</span>okBtn.innerHTML = param.btnOk;

    <span style="white-space:pre">	</span>var noBtn = document.createElement("button");
    <span style="white-space:pre">	</span>noBtn.style.cssText = "float:right; width:50px;cursor:pointer;margin-right: 10px;";
    <span style="white-space:pre">	</span>noBtn.innerHTML = param.btnNo;
<span style="white-space:pre">	</span>
    

    <span style="white-space:pre">	</span>//获取当前页面的第一个body节点对象,
    <span style="white-space:pre">	</span>var body = document.getElementById("myList");
    <span style="white-space:pre">	</span>body.appendChild(tipWinObj);
    <span style="white-space:pre">	</span>tipWinObj.appendChild(topDiv);
    <span style="white-space:pre">	</span>tipWinObj.appendChild(contentDiv);

    <span style="white-space:pre">	</span>tipWinObj.appendChild(noBtn);
    <span style="white-space:pre">	</span>tipWinObj.appendChild(okBtn);
    <span style="white-space:pre">	</span>topDiv.appendChild(titDiv);
    <span style="white-space:pre">	</span>topDiv.appendChild(cross);
    <span style="white-space:pre">	</span>topDiv.appendChild(clearDiv);
   

    <span style="white-space:pre">	</span>//鎖屏DIV
    <span style="white-space:pre">	</span>var bgObj = document.createElement("div");
    <span style="white-space:pre">	</span>bgObj.style.cssText = "position:fixed;z-index: 9997;top: 0px;left: 0px;background: #000000;filter: alpha(Opacity=30); -moz-opacity:0.30;opacity:0.30;";
    <span style="white-space:pre">	</span>bgObj.style.width = '100%';
    <span style="white-space:pre">	</span>bgObj.style.height = '100%';
    <span style="white-space:pre">	</span>body.appendChild(bgObj);

    <span style="white-space:pre">	</span>cross.onclick = function () {
        <span style="white-space:pre">	</span>body.removeChild(tipWinObj);
        <span style="white-space:pre">	</span>body.removeChild(bgObj);
    <span style="white-space:pre">	</span>};
    <span style="white-space:pre">	</span>okBtn.onclick = function () {
        <span style="white-space:pre">	</span>param.funcOk();
        <span style="white-space:pre">	</span>body.removeChild(tipWinObj);
        <span style="white-space:pre">	</span>body.removeChild(bgObj);
    <span style="white-space:pre">	</span>};
    <span style="white-space:pre">	</span>noBtn.onclick = function () {
        <span style="white-space:pre">	</span>param.funcNo();
        <span style="white-space:pre">	</span>body.removeChild(tipWinObj);
        <span style="white-space:pre">	</span>body.removeChild(bgObj);
    <span style="white-space:pre">	</span>};
<span style="white-space:pre">	</span>}

<span style="white-space:pre">	</span>var param = {
            title:'这是一个提示框',
            tips:"你点点试试！",
            btnOk:'我是确定',
            btnNo:'取消',
            funcOk:function () {
                alert('真2');
            },
            funcNo:function () {
                alert(2);
            }
        }
        
</script>
</body>
</html>

qq小小布丁
关注
专栏目录
js自定义小弹窗
m0_62109588的博客
01-25 818
JavaScript自定义弹窗
自定义javascript弹窗
mydavidwang的专栏
11-13 3216
自定义js弹框以替代浏览器自带的alert, prompt弹框
JS实现自定义弹窗功能
12-08
众所周知，浏览器自带的原生弹窗很不美观，而且功能比较单一，绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。前段时间在 慕课网 上看到了一个自定义弹窗的实现，自己顺便就学习尝试写了下，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。（代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本） HTML部分：（没什么内容 放置一个按钮调用函数，js中调用实例即可供参考） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta
js自定义弹窗
03-02 151
<一>confirm弹窗 页面操作中常见需要确认操作。 例如：删除某条消息前需要确认是否删除。 页面中弹窗确认操作用到confirm消息对话框。 JS代码 function del(){ var del = confirm("确认要删除吗？"); if(del == true){ //执行删除操作 alert("该条评...
javascript自定义弹窗
雷强的博客
02-23 331
window.open ('${ctx}platform/xcjc/task/desk_index_custom_daiban.do','newwindow','height=350,width=500,top=400,left=450,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');
js实现自定义弹窗
weixin_30319153的博客
08-08 2153
　　众所周知，浏览器自带的原生弹窗很不美观，而且功能比较单一，绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。前段时间在慕课网上看到了一个自定义弹窗的实现，自己顺便就学习尝试写了下，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。（代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本） HT...
javascript实现弹窗
weixin_48727085的博客
06-29 175
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹窗&
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压
最新发布
03-13
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：...
Vue自定义弹窗指令的实现代码
10-18
以上是关于Vue自定义弹窗指令实现的知识点介绍，文章通过实例代码详细地讲解了如何在Vue2.0版本中创建和使用自定义弹窗指令，这对于那些希望通过Vue扩展其应用交互功能的前端开发者来说，是非常有价值的知识。
自定义弹出窗口
10-14
自定义的可编辑的弹出窗口，用于输入框编写不下时使用
HTML自定义弹框.html
05-08
这是一个简单的HTML Demo，实现了点击按钮后出现一个遮罩层，在层上实现弹框效果，在框中可以自定义消息，或者内容。
js自定义弹出框样式
01-22
alert和comfirm,里面有源码，代码复用性很高，如果你不满意我的，也可以适当的修改我的，想用的话，直接下载即可
自定义js弹出窗口（弹出层）
04-09
自定义js弹出窗口 跟jquery的弹出一个层效果一样，供学习还有简单使用。。。
html 手机端自定义弹窗效果
07-04
html 手机端自定义弹窗效果
Jquery实现自定义弹窗示例
12-10
在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，...
jQuery自定义弹窗功能插件
04-02
在本文中，我们将深入探讨如何使用jQuery来创建自定义弹窗功能插件。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发者能够更高效地构建交互式网页。针对"jQuery自定义弹窗功能插件...
html自定义弹窗
alhhhhh_j的博客
04-26 1877
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>弹窗</title> </head> <style> #close:hover { background-color:#aa1111; border-color:#aa1111; } </style> <body> <button onclick='sho.
js自定义弹出框
qq_42402381的博客
05-22 9076
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ width: 400px; he...
Jquery自定义弹窗实现拖拽功能
jQuery作为一个强大的JavaScript库，简化了许多DOM操作，使得创建自定义弹窗变得更加便捷。 首先，我们来看HTML部分，这是弹窗的基础结构。在给定的代码中，有一个`<button>`元素用于触发弹窗显示，类名为`alter`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值