JavaScript弹框、对话框、提示框方法,以及原创JS模拟Alert弹出框效果

时间: 2017-12-14阅读: 3592标签: js知识

通过js实现网页弹出各种形式的窗口,常用的:弹出框、对话框、提示框等。


对话框    

弹出对话框并输出一段提示信息    

alert("提示信息!");


询问框 

弹出一个询问框,有确定和取消按钮 ,利用对话框返回的值 (true 或者 false) 

if (confirm("你确定提交吗?")) {  
         alert("点击了确定");  
}else{  
         alert("点击了取消");  
}


输入框

弹出一个输入框,输入一段文字,可以提交。需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值 

var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name 
if (name){  
      alert("欢迎您:" + name)  
}


 弹出新窗口

window.open 弹出新窗口的命令; 
'page.html' 弹出窗口的文件名; 
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; 
height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

'newwin':隐藏菜单栏地址栏工具条 

window.open ('page.html') 
//经过设置后的弹出窗口
window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行


点击按钮时常用的6中提示框和操作

<!-----------按钮提示框---------->
<input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););

<!-----------按钮提示框----------> 
<input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗?');

<!-----------提交按钮----------> 
<input type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"/>

<!-----------关闭按钮----------> 
<input type="button" value="关闭" onclick="javaScript:window.close();">

<!-----------返回并关闭连接----------> 
<a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a>
javaScript:window.location.reload();//返回当前页并刷新

<!-----------返回上一级页面----------> 
<input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>


原创JS模拟Alert弹出框效果

function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮
        msg = msg || '';
        mode = mode || 0;
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var isIe = (document.all) ? true : false;
        var isIE6 = isIe && !window.XMLHttpRequest;
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var winSize = function(){
            var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
            // innerHeight获取的是可视窗口的高度,IE不支持此属性
            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }

            if (self.innerHeight) {    // all except Explorer
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }

            // for small pages with total height less then height of the viewport
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }

            // for small pages with total width less then width of the viewport
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }

            return{
                'pageWidth':pageWidth,
                'pageHeight':pageHeight,
                'windowWidth':windowWidth,
                'windowHeight':windowHeight
            }
        }();
        //alert(winSize.pageWidth);
        //遮罩层
        var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' +  (winSize.pageHeight + 30) + 'px;';
        styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
        var shadowDiv = document.createElement('div'); //添加阴影DIV
        shadowDiv.style.cssText = styleStr; //添加样式
        shadowDiv.id = "shadowDiv";
        //如果是IE6则创建IFRAME遮罩SELECT
        if (isIE6) {
            var maskIframe = document.createElement('iframe');
            maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
            maskIframe.frameborder = 0;
            maskIframe.src = "about:blank";
            shadowDiv.appendChild(maskIframe);
        }
        document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
        //弹出框
        var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置
        var alertBox = document.createElement('div');
        alertBox.id = 'alertMsg';
        alertBox.style.cssText = styleStr1;
        //创建弹出框里面的内容P标签
        var alertMsg_info = document.createElement('P');
        alertMsg_info.id = 'alertMsg_info';
        alertMsg_info.innerHTML = msg;
        alertBox.appendChild(alertMsg_info);
        //创建按钮
        var btn1 = document.createElement('a');
        btn1.id = 'alertMsg_btn1';
        btn1.href = 'javas' + 'cript:void(0)';
        btn1.innerHTML = '<cite>确定</cite>';
        btn1.onclick = function () {
            document.body.removeChild(alertBox);
            document.body.removeChild(shadowDiv);
            return true;
        };
        alertBox.appendChild(btn1);
        if (mode === 1) {
            var btn2 = document.createElement('a');
            btn2.id = 'alertMsg_btn2';
            btn2.href = 'javas' + 'cript:void(0)';
            btn2.innerHTML = '<cite>取消</cite>';
            btn2.onclick = function () {
                document.body.removeChild(alertBox);
                document.body.removeChild(shadowDiv);
                return false;
            };
            alertBox.appendChild(btn2);
        }
        document.body.appendChild(alertBox);
}

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

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

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/247

javascript中什么是句柄?

一个句柄是指使用的一个唯一的整数值,即一个4字节(64位程序中为8字节)长的数值,来标识应用程序中的不同对象和同类中的不同的实例。

javascript不可变性是什么?

不可变性即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改变,这样我们就说是不可变的

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

javascript怎么判断按钮被点击?

JavaScript可以通过Event对象的target事件或srcElement(IE浏览器支持)来判断按钮是否被点击。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

javascript由几部分组成?

JavaScript有三部分组成。分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

Js中constructor指向问题

首先用一个例子指出来constructor存在形式。由上面的代码我们总结出结论1:上面的代码在控制台可以看出constructor是指向构造器Fruit的引用。这个地方就有点奇怪了。这个constructor到底指向的是那个实例的构造器?

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

Js如何获取ul中li的个数?

javascript如何获取ul中li的个数?下面本篇文章就来给大家介绍一下使用javascript获取ul中li个数的方法,希望对大家有所帮助。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广