弹出对话框,背景颜色逐渐变暗!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  <script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script>    
  <title>无标题页</title>
   <style type="text/css">
#dialog1
{
    position: absolute;
    top: 0px;
    left: 0pt;
    width: 100%;
    height: 100%;
    background: gray;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    text-align: center;
    display:none;
}
#dialog2
{
    border: 1px solid rgb(51, 102, 153);
    background: white;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 135px;
    left: 232px;
    display:none;
}
#dialog2 .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;position:relative;background:#fff;}
 #dialog2 .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
 #dialog2 .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
#dialog2 .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
 #dialog2 .main ul li a{color:#333;display:block;}
#dialog2 .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}
    </style>
    <script>
    $(function(){
$('#Button1').click(function(){
    var height = $(document).height();
    var width =$(document).width();
    $(document.body).append('<div id="bg"></div>');
    $('#bg').css({position:"absolute","z-index":0,left:0,top:0,zoom:1,"height":height,"width":width,"filters":"alpha(opacity=0)","background":"black","opacity":0});
 $('#bg').fadeTo(1000,0.3);
$('#dialog2').fadeIn(1000).css({"z-index":1});
    });
$('#btnconfirm').click(function(){
    $('#dialog1').fadeOut(1000);
    $('#bg').fadeTo(1000,0,function(){
        $(this).css({"z-index":-1});
    })
    $('#dialog2').fadeOut(1000);
    });
});
 function test()
 {
  alert('ffff');
  }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="弹出"  /> ghhhhhhhhhhhhhhhhhhhh <input id="Button1" type="button" value="弹出2"  οnclick="test();" />
    <div id="dialog1"></div>
    <div id="dialog2" align="center">
 <div class="main">
            <h2>我在这里</h2>
            testtestetestetsetetestettsteset
             </ul>
        </div>
        <input id="btnconfirm" type="button" value="确定"  />
    </div>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在HTML中,可以使用JavaScript的`alert()`函数来创建一个弹出对话框。`alert()`函数在浏览器中显示一个带有消息内容的对话框,直到用户关闭它为止。 以下是一个简单的示例: ```html <button onclick="alert('这是一个弹出对话框!')">点击我</button> ``` 当用户点击上面的按钮时,就弹出一个对话框,显示消息“这是一个弹出对话框!”。 然而,这种方式并不是最佳的网页交互方式,因为它打断用户的操作流程,而且通常不提供用户反馈。在现代的网页设计中,更常见的是使用CSS和JavaScript来创建自定义的弹出对话框。 例如,你可以使用CSS来设置对话框的样式,然后用JavaScript来控制对话框的显示和隐藏。下面是一个简单的示例: ```html <div id="dialog" style="display: none;">这是一个对话框</div> <script> // 显示对话框 function showDialog() { document.getElementById("dialog").style.display = "block"; } </script> <button onclick="showDialog()">点击我</button> ``` 在这个示例中,当用户点击按钮时,调用`showDialog()`函数,这个函数改变`dialog`元素的`display`属性,使其从默认的"none"变为"block",从而显示对话框。 以上就是一些基本的HTML弹出对话框的介绍。在实际应用中,你可能还需要考虑更多的因素,比如如何处理不同的浏览器兼容性问题,如何使用Ajax等技术来实现更复杂的交互等等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值