制作的Html弹出对话框,扁平化风格。弹出以及取消时带有Jquery特效。喜欢的朋友可以将源代码拿走。
源代码:html扁平化对话框h3{
float:left;
margin:5px 0 0 5px;
font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
font-weight:800;
color:#efefef;
width:100%;
}
#foot{
height:50px;
margin-top:200px;
}
#foot>a{
float:left;
width:50%;
font: 18px "微软雅黑", Arial, Helvetica, sans-serif;
line-height:50px;
text-align:center;
background-color:#ff7777;
color:#fff;
text-decoration:none;
cursor:pointer;
}
#foot>a:hover{
background-color:#e84c3d;
}
#foot>a:active{
background-color:#c54143;
}
#center{
float:left;
margin:20px 5px 20px 5px;
font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}" _ue_custom_node_="true"> 弹出对话框 对话框提示语
我是弹出对话框 确定取消查看源代码 CSS3立方体柜子 Copyright©2014 Pengyaou版权所有 2014年3月12日 蜀ICP备14004625号 0){
$("#center").html("已经弹出");
return;
}
$("#center").html("我是弹出对话框");
var mWidth=$(document).width();
var mHeight=$(document).height();
$("#Main").css("margin-top",mHeight/2 "px");
$("#Main").css("margin-left",mWidth/2 "px");
$("#Main").animate({width:"540px",height:"300px",marginTop:mHeight/2-145 "px",marginLeft:mWidth/2-270 "px",opacity:1},300,function(){
$("#Main").animate({width:"500px",height:"250px",marginTop:mHeight/2-125 "px",marginLeft:mWidth/2-250 "px"},100);
});
}" _ue_custom_node_="true">