如何实现类似于alert的功能

iamqianqian 2008-11-01 06:02:29
看到一些例子，用DIV实现，的确设置了alert的样式，但是忽略了一个问题，JS本身的alert，会等待用户点击“确定”之后才会继续执行下面的JS代码
不知道该如何实现？谢谢大家

我想要的效果是，当用户点击自己定义的类似alert功能之后，才会执行alert('abcdeg');这段JS
=====================附上测试的代码===============================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试Alert</title>

<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=document.body.offsetHeight;


var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position="absolute";
msgObj.style.background="white";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.width=msgw + "px";
msgObj.style.height=msgh + "px";
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
msgObj.style.left=(sWidth-msgw)/2 + "px";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>

</HEAD>
<BODY>
<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>© 2006');alert('abcdeg');" />
</BODY>


</html>
...全文
630 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
不悲不喜 2008-12-21
  • 打赏
  • 举报
 回复
利用多线程编程的实现。
<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>测试Alert </title>

    <script type="text/javascript" src="Concurrent.Thread-full.js">

    </script>

    <script language="JavaScript">

        var _isAlert = 0;

        function _Alert1(str, param){

            var msgw, msgh, bordercolor;

            msgw = 400;//提示窗口的宽度  

            msgh = 100;//提示窗口的高度 

            bordercolor = "#336699";//提示窗口的边框颜色  

            titlecolor = "#99CCFF";//提示窗口的标题颜色 

            var sWidth, sHeight;

            sWidth = document.body.offsetWidth;

            sHeight = document.body.offsetHeight;

            var bgObj = document.createElement("div");

            bgObj.setAttribute('id', 'bgDiv');

            bgObj.style.position = "absolute";

            bgObj.style.top = "0";

            bgObj.style.background = "#777";

            bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";

            bgObj.style.opacity = "0.6";

            bgObj.style.left = "0";

            bgObj.style.width = sWidth + "px";

            bgObj.style.height = sHeight + "px";

            document.body.appendChild(bgObj);

            var msgObj = document.createElement("div")

            msgObj.setAttribute("id", "msgDiv");

            msgObj.setAttribute("align", "center");

            msgObj.style.position = "absolute";

            msgObj.style.background = "white";

            msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

            msgObj.style.border = "1px solid " + bordercolor;

            msgObj.style.width = msgw + "px";

            msgObj.style.height = msgh + "px";

            msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";

            msgObj.style.left = (sWidth - msgw) / 2 + "px";

            var title = document.createElement("h4");

            title.setAttribute("id", "msgTitle");

            title.setAttribute("align", "right");

            title.style.margin = "0";

            title.style.padding = "3px";

            title.style.background = bordercolor;

            title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

            title.style.opacity = "0.75";

            title.style.border = "1px solid " + bordercolor;

            title.style.height = "18px";

            title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";

            title.style.color = "white";

            title.style.cursor = "pointer";

            title.innerHTML = "关闭";

            title.onclick = function(){

                document.body.removeChild(bgObj);

                document.getElementById("msgDiv").removeChild(title);

                document.body.removeChild(msgObj);

                _isAlert = 0;

            }

            document.body.appendChild(msgObj);

            document.getElementById("msgDiv").appendChild(title);

            var txt = document.createElement("p");

            txt.style.margin = "1em 0"

            txt.setAttribute("id", "msgTxt");

            txt.innerHTML = str;

            document.getElementById("msgDiv").appendChild(txt);

        }

        

        function _Alert(str, param){

            _isAlert = 1;

            _Alert1(str, param);

            while (_isAlert) {

            }

            //在这里加上要做的处理       

            alert("我自己的处理!");

        }

        

        function callAlert(str, param){

            _Alert(str, param);

            alert(0);

        }

        

        function myAlert(str, param){

            Concurrent.Thread.create(_Alert, str, param);

        }

    </script>

    </HEAD>

    <BODY>

        <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>

        <br/>

        <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>

        <br/>

        <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>

        <br/>

    </BODY>

</html>
iamqianqian 2008-11-02
  • 打赏
  • 举报
 回复
继续问
cloudgamer 2008-11-02
  • 打赏
  • 举报
 回复
试试这个
不悲不喜 2008-11-02
  • 打赏
  • 举报
 回复
深入的调查发现,
楼主的要求居然可以实现.
问题的关键是如何实现javascript的多线程编程.
实现的原理大概的想法如下:
(1) 显示对话框层之后.
(2) 将全局的对话框标志设定为ON.
(3) 循环检索标志位的状态,直到标志被设置为OFF后,退出循环继续后面的处理.
(4) 当按下对话框的按钮后,将标志位置为OFF.

使用Concurrent.Thread.js库可以实现多线程编程.
不过这个库有500K.
下面是使用这个库作成的一个sample供参考.

<html>

	<script language="javascript">

		function closeMe()	{

			isOpened=false;

		}

	</script>

	

	<body>

		<input type="button" value="test" onclick="closeMe()">

	</body>

	<script type="text/javascript" src="Concurrent.Thread.js"></script>

	<script language="javascript" type="text/x-script.multithreaded-js">



	var isOpened = true;

	

	var i = 1;

	while ( 1 ) {

		window.status = i++;

		if( isOpened == false ){

			alert( "close" );

			break;

		}

	}

	</script>

</html>
Go 旅城通票 2008-11-02
  • 打赏
  • 举报
 回复
你的这个模仿alert效果是无法停止下面的代码的执行的，你需要在点击层的关闭按钮时执行你需要的代码

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>测试Alert </title> 



<script type="text/javascript" language="javascript"> 

            function sAlert(str,func,param){ 

            var msgw,msgh,bordercolor; 

            msgw=400;//提示窗口的宽度 

            msgh=100;//提示窗口的高度 

            bordercolor="#336699";//提示窗口的边框颜色 

            titlecolor="#99CCFF";//提示窗口的标题颜色 

            

            var sWidth,sHeight; 

            sWidth=document.body.offsetWidth; 

            sHeight=document.body.offsetHeight; 

          



            var bgObj=document.createElement("div"); 

            bgObj.setAttribute('id','bgDiv'); 

            bgObj.style.position="absolute"; 

            bgObj.style.top="0"; 

            bgObj.style.background="#777"; 

            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 

            bgObj.style.opacity="0.6"; 

            bgObj.style.left="0"; 

            bgObj.style.width=sWidth + "px"; 

            bgObj.style.height=sHeight + "px"; 

            document.body.appendChild(bgObj); 

            var msgObj=document.createElement("div") 

            msgObj.setAttribute("id","msgDiv"); 

            msgObj.setAttribute("align","center"); 

            msgObj.style.position="absolute"; 

            msgObj.style.background="white"; 

            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 

            msgObj.style.border="1px solid " + bordercolor; 

            msgObj.style.width=msgw + "px"; 

            msgObj.style.height=msgh + "px"; 

          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px"; 

          msgObj.style.left=(sWidth-msgw)/2 + "px"; 

          var title=document.createElement("h4"); 

          title.setAttribute("id","msgTitle"); 

          title.setAttribute("align","right"); 

          title.style.margin="0"; 

          title.style.padding="3px"; 

          title.style.background=bordercolor; 

          title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 

          title.style.opacity="0.75"; 

          title.style.border="1px solid " + bordercolor; 

          title.style.height="18px"; 

          title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 

          title.style.color="white"; 

          title.style.cursor="pointer"; 

          title.innerHTML="关闭"; 

          title.onclick=function(){ 

            document.body.removeChild(bgObj); 

        document.getElementById("msgDiv").removeChild(title); 

        document.body.removeChild(msgObj); 

func(param)//执行传递进来的函数及参数

        } 

          document.body.appendChild(msgObj); 

          document.getElementById("msgDiv").appendChild(title); 

          var txt=document.createElement("p"); 

          txt.style.margin="1em 0" 

          txt.setAttribute("id","msgTxt"); 

          txt.innerHTML=str; 

      document.getElementById("msgDiv").appendChild(txt); 

      } 

        </script> 



</HEAD> 

<BODY> 

<input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>© 2006',alert,1)" /> <br/>

<input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>© 2006',alert,12)" /> <br/>

<input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>© 2006',alert,123)" /> <br/>

</BODY> 



    

  </html>


Cyril_Tam 2008-11-01
  • 打赏
  • 举报
 回复
这种效果?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试Alert </title>

<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=document.body.offsetHeight;


var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position="absolute";
msgObj.style.background="white";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.width=msgw + "px";
msgObj.style.height=msgh + "px";
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
msgObj.style.left=(sWidth-msgw)/2 + "px";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str + "<a href='#' onClick=\"alert('你干嘛点击我??')\">测试,点我</a>";
document.getElementById("msgDiv").appendChild(txt);
}
</script>

</HEAD>
<BODY>
<input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>© 2006');" />
</BODY>


</html>
mjjzg 2008-11-01
  • 打赏
  • 举报
 回复
不是很懂，顶了，以表支持！
不悲不喜 2008-11-01
  • 打赏
  • 举报
 回复
想在DIV弹出的时候阻塞程序执行恐怕不行。
因为一个页面本身还是在一个线程中。
如果程序阻塞的话，也就无法接收用户输入了.

IMAGSE 2008-11-01
  • 打赏
  • 举报
 回复
呵呵，重写alert对话框么？ 我见有人用模式对话框重新搞成了自己需要的形式

看着也不错哦~
wtcsy 2008-11-01
  • 打赏
  • 举报
 回复
试试把往下执行的部分写成函数
在那个模拟alert的按纽上加那个事件....
个人愚见,错了莫怪.........
iamqianqian 2008-11-01
  • 打赏
  • 举报
 回复
有没有人给个思路啊，谢谢
囧 2008-11-01
  • 打赏
  • 举报
 回复
不会，帮顶。。。
模拟alert，confirm 阻塞状态
/*** * 模拟alert弹窗 * content 为弹框显示的内容 * 确定按钮对应的下面取消关闭显示框 * **/function oAlert(content) { var oWrap = $('.alert_d'); oWrap.show(); oWrap.find('p').html(content); btnOk(); ...
jquery 实现类似于百度自动匹配搜索
正如题目中提到的：jquery实现类似于百度自动匹配搜索，首先，我们看一下实现效果：    实现这样的效果并不难，难的是这样的设计理念是不是我们作为软件开发的必备素质。  起初，我的需求是这样的：每一个注册...
在移动或者PC页面上使用类似于微信语音播放功能
（2） 当点击语音条时，会播放相应的语音，语音条并且会变成动态播放状态，类似于接收到的微信播放一样 （3）在播放状态，点击语音条时，将停止播放，并不是暂停，然后再点击语音条时，将重新重头播放 2、功能...
alert 在手机浏览器会显示网址，怎么能去掉这个网址
目前想到的一个解决方案，是用jquery的模拟的alert插件进行代替，可是找的几个插件都不能实现alert的阻塞功能。怎么破，具体解决方案如下： 解决方案1：模拟的都实现不了alert的阻塞功能，都是居于回调或者事件事件...
【Vue-仿照element-ui自己动手封装ui组件】—— alert、confirm 弹窗
实现alert和comfirm 先看效果如图 需求分析 1、要能自定义弹窗标题、消息文本，弹窗按钮文本 2、要支持全局的函数式调用，一处引入随从调用 3、弹窗组件要有比较高的权重，覆盖在顶层却不能像普通组件一
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章