`
michealBean
  • 浏览: 8983 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

自定义alert提示框

 
阅读更多
function selfAlert(msgstr,timer)
{
	    var alertValue = 0; 
	
	    var h = screen.availHeight;
	    var w = screen.availWidth;
	    var dv = document.createElement("div");
	    dv.setAttribute('id','bg');
	    dv.style.height = h + "px";
	    dv.style.width = w + "px";
	    dv.style.zIndex = "1111";
	    dv.style.top = 0;
	    dv.style.left = 0;
	    dv.style.background = "#fff";
	    dv.style.filter = "alpha(opacity=0)";
	    dv.style.position = "absolute";
	    document.body.appendChild(dv);
	
	    var dvMsg = document.createElement("div");
	    dvMsg.style.position = "absolute";
	    dvMsg.setAttribute('id','msg');
	    dvMsg.style.width = "140px";
	    dvMsg.style.height = "50px";
	    dvMsg.style.top="30%";
	    dvMsg.style.left="40%";
	    dvMsg.style.background = "white";
	    dvMsg.style.zIndex = "1112";

	    strHtml =  "<table width='200' height='25' border='0' cellspacing='0' cellpadding='0' align='center'>"
	    strHtml += "    <tr height='25' style='line-height:25px;'>"
	    strHtml += "        <td width='250' title='移动' style='cursor:move;background:#CFD7EC url(title_bg_left.gif) no-repeat top left;' onmousedown='oMove(parentNode.parentNode.parentNode.parentNode);'>"
	    strHtml += "            <font style='font-size:12px;font-weight:bold;color:#000;margin-left:10px;'>消息提示框</font></td>"
	    strHtml += "        <td width='30' style='background:#CFD7EC url(title_bg_right.gif) no-repeat right top;'>"
	    strHtml += "            <img src='close.gif' style='margin-right:3px;cursor:hand;' onclick='imgClose();'><td></tr>"
	    strHtml +=  "</table>"
	    strHtml +=  "<table width='200' height='50' border='0' cellspacing='0' cellpadding='0' align='center' style='border:1px solid #343434'>"
	    strHtml += "    <tr height='50' bgcolor='#F4F4F4'><td width='' style='padding-left:10;'></td>"
	    strHtml += "        <td width='200' align='center'>" + msgstr + "</td></tr>"
	    strHtml += "    <tr height='27'><td colspan='2' style='background:#F4F4F4;padding-top:0px;' valign='top' align='center'>"
	    strHtml += "         <input type='button' value='确&nbsp;定' style='width:70;' onclick='btnclick()'></td></tr>"
	    strHtml += "</table>"
	    dvMsg.innerHTML = strHtml;
	    document.body.appendChild(dvMsg);
	
	    imgClose = function (){
	        alertValue = 2; 
	        document.body.removeChild(dv);
	        document.body.removeChild(dvMsg);
	    };
	    btnclick = function (){
	        alertValue = 1; 
	        document.body.removeChild(dv);
	        document.body.removeChild(dvMsg);
	    };
	    
	    remove = function ()
	    {
	        if(alertValue==0){
	            document.body.removeChild(dv);
	            document.body.removeChild(dvMsg);
	        }
	    };

	    setTimeout("remove()",timer);
	    
	    oMove = function(obj) {
	        var otop,oleft;
	        otop = event.y - obj.offsetTop;
	        oleft = event.x - obj.offsetLeft;
	        obj.setCapture();
	
	        obj.onmousemove  = function()
	        {
	            obj.style.left = event.x - oleft;
	            obj.style.top = event.y - otop;
	        };
	        obj.onmouseup  = function()
	        {
	            obj.onmousemove = null;
	            obj.style.filter = null;
	            obj.releaseCapture();
	        };
	    };
};

 

分享到:
评论

相关推荐

    html自定义alert提示框

    有时候感觉系统自带的提示框太丑了,试试自定义提示框吧,直接引用js即可

    jquery 自定义alert提示框

    有时候感觉系统自带的提示框太丑了,试试jquery自定义提示框吧,可以自适应手机,要先引用jquery

    js,css做的alert提示框

    在描述中提到的博文链接虽然没有提供具体内容,但我们可以假设它提供了有关创建自定义Alert提示框的教程。通常,这个过程包括以下步骤: 1. **HTML结构**:创建一个包含必要元素(如标题、消息文本、按钮等)的HTML...

    ios-自定义实用Alert提示框(Block回调).zip

    `ios-自定义实用Alert提示框(Block回调)`项目提供了一个自定义的UIAlertView实现,旨在增强其功能和灵活性,使得开发者能够更便捷地处理用户的交互反馈。以下是对该项目的详细解析: 首先,UIAlertView是苹果提供...

    jquery模拟alert提示框

    接着,`jquery.alert.js`文件包含了实现自定义alert提示框的逻辑。这个插件可能包括以下内容: ```javascript (function ($) { $.fn.extend({ alert: function (options) { // 配置项和默认值 var settings = $...

    Winform自定义消息框,好看的消息提示Alert源码

    Winform自定义消息框,好看的消息提示Alert源码,国外大神,很基础的实现,可以在此基础上进行优化和进一步调整。Winform控件、Winform优美提示框、消息框、Alert信息弹窗、Notification

    自定义弹出框样式 alert修改

    ### 自定义弹出框样式 alert修改 在网页开发过程中,我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用,但其样式固定且无法自定义,这在追求用户体验和界面美观的现代Web...

    alert提示框(多种样式)

    在网页开发中,"alert提示框"是一种常用的用户交互元素,用于向用户显示重要的通知、警告或确认信息。本文将详细介绍各种样式的alert提示框及其应用,并提供几个相关的资源文件。 传统的JavaScript `alert()` 函数...

    js 自定义提示框

    在JavaScript编程中,自定义提示框是常见的需求,特别是在网页应用和交互设计中。传统的浏览器内置的`alert()`、`confirm()`和`prompt()`方法虽然简单易用,但其样式和功能有限,不能满足现代Web界面的个性化和复杂...

    自定义 js 提示框

    在IT行业中,自定义JavaScript提示框是一个常见的需求,特别是在...在实际开发中,还可以利用现有的库和框架,如SweetAlert、Bootstrap Modal等,它们提供了一些预设的样式和功能,能够快速实现高质量的自定义提示框。

    自定义Alert,Freamwork

    在iOS开发中,自定义Alert是一种常见的需求,它允许开发者根据应用的设计风格和交互需求创建个性化的提示对话框。本文将深入探讨如何自定义Alert并将其封装为一个Framework,以便在多个项目中重用。 首先,自定义...

    jquery alert 提示框、动态加载提示框、jquery插件

    本文将详细探讨"jQuery Alert提示框"、"动态加载提示框"以及"jQuery插件"的相关知识点。 一、jQuery Alert提示框 在网页开发中,我们常常需要向用户显示一些信息或确认操作,传统的JavaScript alert函数虽然简单,...

    简易的alert提示框

    总结来说,"简易的alert提示框"是前端开发中的基础工具,但在实际应用中,为了提供更丰富的用户体验和更高的可定制性,开发者通常会转向使用自定义的模态组件或现有的UI库。理解如何创建和适当地使用这些提示框对于...

    自定义WEB提示框(可移动、可换肤)

    在网页开发中,自定义提示框是提升用户体验和界面交互性的重要手段。传统的JavaScript警告框如`alert()`、`confirm()`和`prompt()`虽然简单易用,但它们的样式和功能往往受到浏览器的限制,无法满足更复杂的需求。...

    SweetAlert 提示框 带6种demo

    - **SweetAlert** 是一个独立的JavaScript库,用于创建高度定制的提示框。它允许开发者在用户界面上添加各种类型的警告或提示信息,如警告消息、成功提示、错误信息、询问对话框等。 - **轻量级**:SweetAlert的...

    jQuery支持自定义消息提示框代码.zip

    本资源“jQuery支持自定义消息提示框代码.zip”提供了一种实现自定义消息提示框的方法,这对于增强用户体验和进行交互式设计至关重要。 首先,我们要了解jQuery中的消息提示框(通常称为对话框或警报)是如何工作的...

    自定义alertView弹出框

    在iOS开发中,自定义alertView弹出框是一个常见的需求,特别是在设计用户交互界面时,为了提供更好的用户体验,开发者经常需要创建具有独特样式和功能的弹出提示。在苹果的UIKit框架中,虽然提供了预设的UIAlertView...

Global site tag (gtag.js) - Google Analytics