alert弹出效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Insert title here</title>
<script>
function sAlert(str){
    var msgw,msgh,bordercolor;
    msgw=400;//Width
    msgh=100;//Height
    titleheight=25 //title Height
    bordercolor="#336699";//boder color
    titlecolor="#99CCFF";//title color

    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    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";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj); 

    var msgObj=document.createElement("div")
    msgObj.setAttribute("id","msgDiv");
    msgObj.setAttribute("align","center");
    msgObj.style.background="white";
    msgObj.style.border="1px solid " + bordercolor;
    msgObj.style.position = "fixed";
    msgObj.style.left = "50%";
    msgObj.style.top = "50%";
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    msgObj.style.marginLeft = "-225px" ;
    msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height =msgh + "px";
    msgObj.style.textAlign = "center";
    msgObj.style.lineHeight ="25px";
    msgObj.style.zIndex = "10001"; 

    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>
 <td>
 <a onclick="sAlert(‘敬请期待‘);">点击</a>
 </td>
</body>
</html>

  

----------------------------

简单的弹窗代码

<html>
<body>
<table>
<tr>
<td><a href="javascript:alert(‘敬请期待!‘)">呵呵</a></td>
</tr>
</table>
</body>
</html>

  

时间: 2024-10-13 12:05:30

alert弹出效果的相关文章

alert()弹出的内容如何换行

alert()弹出的内容如何换行: 关于alert()警告框大家应该都不陌生,有时候我们需要将弹出的内容进行换行,这样可以使内容更加规整,下面就简单介绍一下如何实现此效果,先看一个错误的操作,代码如下: alert("1.用户名不能为空<br/>2.密码不能为空"); 以上代码弹出来的内容并不能够进行换行,因为<br/>是html中的换行符. 正确方式如下: alert("1.用户名不能为空.\n2.密码不能为空."); 以上代码实现了换行功

cocos2d-x 弹入、弹出效果(以菜单为例子)

弹入和弹出菜单为了使动作更平滑,涉及到动作组合.(CCMoveTo .CCEaseExponentialOut)(菜单背景图位置仅为示范例子,还需调整) 以菜单的背景图为例: //生成菜单背景图 CCSprite* MainMenuBG = CCSprite::create("menu_bg.png"); MainMenuBG->setPosition(ccp(visibleSize.width/2 +10,visibleSize.height +20)); this->a

分享20个华丽的模态窗口弹出效果示例(梦想天空)

分享20个华丽的模态窗口弹出效果示例 在你的品牌和网站访问者之间建立情感联系是非常重要的.模态弹出窗口可能会帮助您完成这个具有挑战性的任务,以及分享给游客一些重要信息.作为一项常用规则,模态弹出窗口被用于各种号召行动的消息,如鼓励用户订阅新闻邮件,下载一些免费赠品或通知关于一些新的产品,服务或功能发布等.在这里,你会看到值得你注意的20个华丽的弹出窗口示例. 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美网页作品 2

Android PopupWindow 仿微信弹出效果

项目中,我需要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果,这样大家直接拿到项目里就可以用了!首先让我们先看效果: 那么我首先先看下布局代码非常简单:如下 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pop_layout" android:layout_

仿简书、淘宝等等App的View弹出效果

昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView .我们创建它们: self.view.backgroundColor = [UIColor blackColor]; _

Response.Write(&quot;&lt;script&gt;alert(&#39;弹出对话框!&#39;)&lt;/script&gt;&quot;) 后跟Response.Redirect(&quot;page.aspx&quot;);不能弹出对话框,直接跳转页面了 如何解?

Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "", "<script language=javascript >alert('弹出对话框!');</script>");

重写alert弹出窗口样式

<script> window.alert = function(str)    {     var shield = document.createElement("DIV");     shield.id = "shield";     shield.style.position = "absolute";     shield.style.left = "0px";     shield.style.top

爱淘宝手机版分类导航菜单弹出效果设计

来和大家一起讨论讨论爱淘宝手机版的分类导航菜单弹出效果是如何设计实现的.先来看几个截图,一个是爱淘宝官方网站的截图,另一部分是我仿照爱淘宝做的截图 先声明一下我们只是借鉴爱淘宝手机版界面来进行技术的学习,如有博友看到请各位一定要理解.此博客毫无盗用淘宝核心技术. 第一张图是爱淘宝官网的截图,后面两张是我们自己仿照做的截图. 首先分析一下要实现的功能细节 点击手机页面商品列表的图片,导航菜单会从手机的右侧出来 导航菜单下面会有一个遮盖层,这样子的作用防止用户点击最底层的商品 最底层的商品可以在遮盖

Asp.Net alert弹出提示信息的方法

1.ClientScript.RegisterStartupScript(GetType(),"message","<script>alert('第一种方式,无白屏!');</script>");2.HttpContext.Current.Response.Write("<script>alert('第二种方式,有白屏!')</script>");3.public static void Show(