`
wangbin-caoming
  • 浏览: 4606 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

js 仿alert 不带关闭

FirefoxIEOperaWebHTML 
阅读更多
一个简单的弹出个信息提示框(js的alert)，今天客户要求不要右上角的「×」。参照了
http://www.iteye.com/topic/528574。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
<html>   
<head>   
<title></title>   
  
</head>   
<body>   
     
</body>   
  
<script type="text/javascript">   
    var s = new selfAlert("タイムカード修正が行われました。<br>勤務集計・生産性の再計算を行います。");   
  
function selfAlert(msgstr){   
      
    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 = "300px";   
    dvMsg.style.height = "100px";   
    dvMsg.style.top="30%";   
    dvMsg.style.left="40%";   
    dvMsg.style.background = "white";   
    dvMsg.style.zIndex = "1112";   
       
    strHtml =  "<table width='300' height='25' border='0' cellspacing='0' cellpadding='0' align='center'>"  
    strHtml += "    <tr height='25' style='line-height:25px;'>"  
    strHtml += "        <td width='300' style='cursor:move;background:#F4F4F4 ;'onmousedown='oMove(parentNode.parentNode.parentNode.parentNode);'>"  
    strHtml += "            <font style='font-size:12px;font-weight:bold;color:#000;margin-left:10px;'>WEBページからのメッセージ</font></td>" 
    strHtml +=  "</tr></table>"  
    strHtml +=  "<table width='300' height='145' border='0' cellspacing='0' cellpadding='0' align='center' style='border:1px solid #343434'>"  
    strHtml += "    <tr height='112' bgcolor='#Ffffff'><td width='38' style='padding-left:25;'><img src='info.jpg'></td>"  
    strHtml += "        <td width='240' align='left'>" + "<font size='2'>"+msgstr+"</font>" + "</td></tr>"  
    strHtml += "    <tr height='33'><td colspan='2' style='background:#F4F4F4;padding-top:0px;' valign='center' align='center'>"  
    strHtml += "         <input type='button' value='OK' style='width:70;' onclick='btnclick()'></td></tr>"  
    strHtml += "</table>"  
    dvMsg.innerHTML = strHtml;   
    document.body.appendChild(dvMsg);   
    
    btnclick = function (){ 
        document.body.removeChild(dv);   
        document.body.removeChild(dvMsg);   
    }   
       
    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();   
        }   
    }   
}   
</script>   
</html>
  • 大小: 14.9 KB
分享到：
评论
12 楼 alert008 2010-01-19  
小鬼子，草
11 楼 wangbin-caoming 2010-01-18  
supercrsky 写道
Japan?
恩...
10 楼 wangbin-caoming 2010-01-18  
wangbin-caoming 写道
BarryWei 写道
用firefox测试过了不？用Opera测试过了不？
可以正常显示吗？

firefox和Opera对于move都不能用！IE系列可以 move！有待改进.....，对方客户要求IE。呵呵！
改进了，firefox，Opera，IE系列可以move了。但是感觉有点傻傻的。
oMove = function(obj,event) {   
		
        var otop,oleft;   
		var evt = event? event: window.event; 
        otop = evt.clientY - obj.offsetTop;   
        oleft = evt.clientX - obj.offsetLeft; 
		var isIE=document.all? true:false;
		
		if (isIE){
			obj.setCapture();
		}else{
			window.captureEvents(evt.MOUSEMOVE|evt.MOUSEUP);
		}
        
		
        obj.onmousemove  = function(evt)   
        {   
			if (isIE){
				obj.style.left = event.x  - oleft; 
            	obj.style.top = event.y - otop;  
			}else{
				obj.style.left = evt.pageX  - oleft; 
            	obj.style.top = evt.pageY - otop;  
			}
             
        }   
        obj.onmouseup  = function()   
        {   
            obj.onmousemove = null;   
            obj.style.filter = null; 
			if (isIE){
            	obj.releaseCapture(); 
			}else{
				obj.releaseEvents(evt.MOUSEMOVE|evt.MOUSEUP);
			}    
        }   
    }


9 楼 supercrsky 2010-01-18  
Japan?
8 楼 wangbin-caoming 2010-01-18  
bluely 写道
IE7貌似用不了啊

可以的啊！我测试用的是IE7和IE8.
7 楼 bluely 2010-01-18  
IE7貌似用不了啊
6 楼 wangbin-caoming 2010-01-18  
BarryWei 写道
用firefox测试过了不？用Opera测试过了不？
可以正常显示吗？

firefox和Opera对于move都不能用！IE系列可以 move！有待改进.....，对方客户要求IE。呵呵！
5 楼 MrLee23 2010-01-18  
日本人都很变态~
4 楼 geweixin 2010-01-17  
变态的日本客户吗？嗯，很正常。
3 楼 BarryWei 2010-01-17  
用firefox测试过了不？用Opera测试过了不？
可以正常显示吗？
2 楼 wangbin-caoming 2010-01-15  
呵呵！客户就是上帝！
1 楼 ThinkingInAll 2010-01-14  
......奇怪的需求
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    sweetalert加载弹窗完成自动关闭

    在网页中引入`sweetalert2.min.js`库后，你可以通过JavaScript调用来显示一个弹窗。例如，创建一个简单的警告对话框： ```javascript swal('你好', '这是一个基本的SweetAlert弹窗', 'info'); ``` 现在，如果我们...

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    在前端开发过程中，系统自带的alert对话框因功能单一、用户体验不佳等问题，时常需要被开发者自定义的提示框替代。尤其在移动端或者特定的平台环境（如苹果手机的微信）中，系统alert显示网站地址或有其他限制，这就...

    js alert 提示窗口

    JavaScript中的`alert()`函数是我们在Web开发中常用的一个功能，它用于向用户显示一个带有信息或者警告的弹出对话框。这个对话框通常包含一个消息和一个“确定”按钮，用户点击“确定”后对话框关闭，程序继续执行。...

    原生js写的弹窗效果(alert效果)

    `alert()`是一个全局函数，它会暂停JavaScript执行并显示一个带有指定消息的对话框。语法非常简单：`alert(message)`，其中`message`是用户要在弹窗中看到的文本。 然而，`alert()`对话框样式固定且功能有限，不能...

    js重写alert和confirm

    `alert`通常用来展示一个简单的警告消息，而`confirm`则会弹出一个带有“确定”和“取消”按钮的对话框，等待用户做出选择。在网页开发中，有时我们需要自定义这些函数的行为，比如改变它们的样式、添加额外功能或者...

    JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)

    原生的JavaScript alert、confirm和prompt对话框虽然简单易用，但其样式和功能较为单一，往往不符合现代网页设计的审美和需求。jQuery Alert 插件则提供了自定义模板、主题、回调函数等特性，使开发者能够创建出符合...

    前端特效-alert框自动关闭.rar

    然而，原生的`alert()`并不支持自动关闭，因此我们需要通过自定义的方法来模拟这个功能。 要创建一个可自动关闭的alert框，我们可以利用HTML和CSS构建一个自定义的对话框元素，比如使用`&lt;div&gt;`标签，然后通过CSS...

    sweetalert.minjs.zip

    引入"sweetalert.min.js"到网页中后，可以通过JavaScript调用SweetAlert的各种方法。例如，创建一个简单的警告对话框： ```javascript swal("警告！", "这是一个示例警告对话框。", "warning"); ``` 或者，带有...

    QQ_JS_alert.rar_javascript_js 提示

    "QQ_JS_alert.rar_javascript_js 提示"是一个专为实现类似QQ界面的美观JavaScript提示框组件设计的资源包。这个组件允许开发者在网页应用中创建具有视觉吸引力且与QQ风格一致的提示信息，以提升应用程序的交互性。 ...

    js_alert

    在JavaScript编程中，`js_alert`通常指的是使用`alert()`函数来显示警告对话框，这是一种基本的用户交互方式。在给定的`js_alert`主题中，我们可以深入探讨`alert()`，`confirm()`以及它们在网页开发中的应用，以及...

    JS提示框美化 alert confirm wait 美化

    在JavaScript编程中，`alert`、`confirm`和`wait`是三种常见的用户交互功能，它们用于向用户显示信息、获取确认或暂停程序执行。在默认情况下，这些对话框的样式较为简单，不符合现代Web应用的美观标准。针对这一...

    自定义样式弹框alert和confirm

    在JavaScript编程中，`alert`和`confirm`是两种常见的内置弹框，用于向用户显示信息或获取用户确认。然而，这些内置弹框的样式和功能相对固定，不能满足所有设计需求。为了提供更个性化的用户体验，开发者经常需要...

    关于js中alert弹出窗口文本换行问题简单详细说明.docx

    JS 中 Alert 弹出窗口文本换行问题详细说明 在 JavaScript 中，Alert 弹出窗口是一个常用的功能，但是当我们需要在弹出窗口中显示换行...* JS+CSS 实现带关闭按钮 DIV 弹出窗口的方法 * JavaScript 实现弹出窗口效果

    sweetalert.rar

    SweetAlert是一款非常流行的JavaScript库，专门用于创建美观的警告对话框、提示框和确认框，为传统的浏览器alert对话框提供了一种更为优雅的替代方案。它不仅提供了丰富的自定义选项，还具有高度可配置性和易用性，...

    jquery模拟alert提示框

    `alert()`函数是JavaScript内置的一种用户交互方式，用于弹出一个带有消息的对话框，通常包含一个“确定”按钮。然而，`alert()`对话框的样式和功能较为单一，不能满足所有设计需求。在某些情况下，开发者可能希望...

    简易的alert提示框

    首先，`alert()`函数是JavaScript语言中的一个内建方法，它会在浏览器中弹出一个带有指定消息的对话框。这个对话框通常包含一个“确定”按钮，用户必须点击后才能继续浏览网页。例如，要弹出一个简单的“你好，世界...

    使用JavaScript实现alert的实例代码

    通过这篇内容，我们可以学到如何不依赖浏览器内置的 alert 函数，而是完全使用纯 JavaScript 代码来创建自定义对话框，并且能够控制样式、关闭逻辑以及页面滚动状态。这种方法在开发交互性更强的前端页面时非常有用...

    sweetalert2.zip

    SweetAlert2是一个流行的JavaScript库，它为Web开发者提供了一种优雅、可自定义且功能丰富的替代原生JavaScript alert对话框的方式。这个库以其简洁的设计、易于使用的API和强大的功能著称，深受前端开发者的喜爱。...

    重写window.alert方法

    在JavaScript的世界里，`window.alert`是一个非常常见的方法，它用于弹出一个带有消息的对话框，用户只能点击“确定”来关闭这个对话框。在Web开发中，有时我们需要自定义`alert`的行为，比如添加更多的交互性或者...

    SweetAlert提示插件

    下载jq22jquery-SweetAlert20190218压缩包后，解压并引入所需的CSS和JS文件。确保页面已经引用了jQuery，然后在需要的地方调用SweetAlert的相关方法即可。 总的来说，SweetAlert是一个强大且易用的前端提示插件，它...

Magicbox
Global site tag (gtag.js) - Google Analytics