1、jquery开发中如何制作漂亮的弹出层提示消息特效
自己写CSS 样式 更具Z-INDEX 控制弹出层
第三方三，如果自己审美能力差，CSS能力低 采用第三方可能效果比自己好。百度一下一大堆插件 比如bootstrap-dialog 漂亮又实用
2、怎么制作一个div弹出层，上面需要一个查看，一个下载，右上角关闭
看看这是不是你需要的
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
margin: 0;
padding: 0;
}
#test{
width: 300px;
height: 200px;
background: #ffffff;
border: 1px solid green;
border-radius: 5px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -150px;
}
#topBut{
width: 100%;
border-bottom: 1px solid green;
height: 40px;
border-radius: 5px 5px 0 0;
display: -webkit-box;
}
.close{
width: 50px;
height: 30px;
text-align: center;
border-radius: 5px;
line-height: 30px;
border: 1px solid green;
position: absolute;
left: 100%;
margin-left: -60px;
margin-top: 4px;
}
.close:hover{
background: #008000;
color: #FFFFFF;
}
#botBut{
position: absolute;
top: 100%;
margin-top: -40px;
width: 100%;
border-top: 1px solid green;
height: 40px;
border-radius:0 0 5px 5px;
display: -webkit-box;
}
.botBut{
-webkit-box-flex: 1;
text-align: center;
line-height: 40px;
width: 50%;
}
.botBut:hover{
background: #008000;
color: #FFFFFF;
}
</style>
</head>
<body>
<button onclick="document.getElementById('test').style.display='block'">打开消息框</button>
<div id="test">
<div id="topBut">
<div style="line-height: 40px;padding-left: 10px;">提示窗口:</div>
<div>
<div class="close" onclick="document.getElementById('test').style.display='none'">关闭</div>
</div>
</div>
<div style="padding: 5px;">
这里是内容区域--<br />
软件名称:百度知道<br />
大小:10M<br />
更新日期:今天<br />
</div>
<div id="botBut">
<div class="botBut" style="border-radius: 0 0 0 5px;">查看网页版</div>
<div class="botBut" style="border-radius: 0 0 5px 0;border-left: 1px solid green;">下载</div>
</div>
</div>
</body>
</html>
3、javascript制作input弹出年份选择层?类似于这种图,思路也行
呵呵，你自己写日历插件还是不好写的。就你图上的这个效果应该不难。就你版的权问题要这样，设置一个全局变量用于存储鼠标是否在日历层上，当鼠标在层上时，设置全局变量为false，当鼠标没在层上时设置全局变量为true。if(true){隐藏日历层}
4、网页设计，弹出层的文本框内无法切换输入法
不是不能切换的问题 是你浏览器的问题 关闭重新打开再试一下 一定可以的！！！、
我是做网站开发的 有需要帮助的地方可以继续问我
我可以帮你解答 或者给你一些不错的教程！！
5、如何制作点击超链接弹出div？
先将隐藏的div 设置为 style="display:none"
用JS调用
给段示例：
<a href="" onclick="show()">
<div id="test" style="display:none">
XXXXXXX(内容内)
</div>
<script>
function show()
{
if (document.getelementbyid('test').display == "none") //展开
{
document.getelementbyid('test').display = ""; (展开)
}
else //隐藏容
{
document.getelementbyid('test').display = "none"; (隐藏)
}
}
</script>
6、网页中登陆的弹出层是怎么设计的？
jquery写的，页面上登录按钮写好点击事件，jquery文件写好登录框，样式表控制登录框效果。
7、求助网页设计高手，请问怎样让弹出的菜单不被其它层覆盖，而是显示在最上层，本人刚学，还请高手帮帮忙！
给弹出的层设定z-index:9999，就是把它的层级设为很高。
8、求高人指点点击连接弹出可移动的层如何制作
搂主,我已经给你做出来了,代码挺多的
这个是主页面
<! 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" />
<title></title>
</head>
<link href="pub.css" rel="stylesheet" type="text/css"/>
<link href="skin1.css" rel="stylesheet" type="text/css"/>
<body>
<div id="begin" style="display:block;">
<input type="button" value="开 始" class="bton fl" onclick="showBg();showSkinDiv('beginDiv');"/>
</div>
<div id="begin2" style="display:block;">
<input type="button" value="开 始" class="bton fl" onclick="showBg();showSkinDiv('beginDiv');"/>
</div>
<!--灰色背景-->
<div id="skinBg" style="display:none;"></div>
<!--主菜单-->
<div id="beginDiv" class="borU floatDiv" style="display:none;">
<span class="borB blo ">
<span class="menu01 blo move" id="beginId" onmousedown="setDragO($('beginDiv'));setNew(event,$('beginDiv'))">
<span class="menu01Bg blo">
<h3 class="fl">开始菜单</h3>
<span class="fr marR hand" onclick="closeBg();closeSkinDiv('beginDiv');">
[关闭]
</span>
</span>
</span>
</span>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这个是js代码,你把下面的JS代码保存为script.js
window.onload = function(){
/*--皮肤cookie--*/
if(readCookie("skin")!="")
{
document.getElementsByTagName("link")[1].href= "css/skin" + readCookie("skin") + ".css" ;
$("testDiv").className = "test" + readCookie("skin");
skinURL = readCookie("skin");
skinPre = readCookie("skin");
}
/*--开始按钮位置--*/
//setBeginPosition();
}
//window.onresize = setBeginPosition;
//window.onscroll = setBeginPosition;
setInterval(function(){setBeginPosition()},1);
var skinPre = 1;//预设皮肤值
var skinURL = 1;//实际皮肤值
function changeSkint(skinId){ //测试层样式修改
skinPre=skinId;
$("testDiv").className = "test"+skinId;
}
function changeSkin(){ //实际样式修改
skinURL = skinPre;
document.getElementsByTagName("link")[1].href= "css/skin" + skinURL + ".css" ;
writeCookie("skin",skinURL,72);
}
function showBg(){ //灰色背景显示
$("skinBg").style.display="block";
if(document.all)
{
$("skinBg").style.height=document.body.scrollHeight + "px";
}
else
{
$("skinBg").style.height=document.documentElement.scrollHeight + "px";
}
$("skinBg").style.top=0+"px";
$("skinBg").style.left=0+"px";
}
function closeBg(){ //灰色背景关闭
$("skinBg").style.display="none";
}
function showSkinDiv(o){//显示层
$(o).style.display = "block";
$(o).style.left = document.documentElement.offsetWidth/2 - $(o).offsetWidth/2 + "px";
$(o).style.top = document.documentElement.scrollTop+100+"px";
}
function closeSkinDiv(o){//隐藏层
$(o).style.display = "none";
}
function $(o){ //获取对象
return document.getElementById(o);
}
function setBeginPosition(){ //开始按钮位置
//alert(document.documentElement.offsetHeight);
//alert(document.body.scrollTop);
//alert(window.screen.availHeight);
/*
if(document.all)
{
$("begin").style.top = document.documentElement.offsetHeight + document.documentElement.scrollTop -10- $("begin").offsetHeight + "px";
}
else
{
$("begin").style.top = document.documentElement.offsetHeight + document.documentElement.scrollTop - 30 - $("begin").offsetHeight + "px";
}
*/
var rt = 500;
var dt = parseInt($("begin").offsetTop);
var bodyT = document.body.scrollTop;
if(bodyT == 0)
{
bodyT = document.documentElement.scrollTop;
}
if(dt != bodyT + rt)
{
var f = (dt - bodyT - rt > 0) ? 1 : -1;
dt -= f * (Math.ceil((Math.abs(bodyT+rt-dt))/20));
//alert(dt);
$("begin").style.top = dt + "px";
$("begin2").style.top = dt + "px";
}
}
/*---------拖动相关函数-------*/
var oDrag = "";//拖动对象
var buttonL = document.all? 1 : 0 ;
var x ;//鼠标放下坐标x
var y ;//鼠标放下坐标y
var dx;
var dy;
function setDragO(o){//获取拖动对象
oDrag = o;
}
function relaseDragO(){//释放拖动对象
oDrag = "";
}
function showDragO(){//辅助函数 显示拖动对象ID
alert(oDrag.id)
}
function dragPro(){
}
function setNew(e,o){
var e = e ? e : event;
x = e.clientX;
y = e.clientY;
o.style.left = o.offsetLeft;
o.style.top = o.offsetTop;
}
document.onmouseup = relaseDragO;
document.onmousedown = function(e){
var e = e ? e : event;
}
document.onmousemove = function(e){
var e = e ? e : event;
if((e.button == buttonL) && oDrag!="")
{
var nx = e.clientX;
var ny = e.clientY;
var rx = x - nx;
var ry = y - ny;
oDrag.style.left = parseInt(oDrag.style.left) - rx +"px";
oDrag.style.top = parseInt(oDrag.style.top) - ry + "px";
//alert(oDrag.style.left);
x = nx;
y = ny;
}
}
/*--=======搜索引擎========--*/
function setSearch(q,act,snH){
$("query").name = q;
$("forms").action = act;
$("sn").innerHTML = snH;
}
/*--============ cookie 相关函数 ============--*/
function writeCookie(name, value, hours)
{ //写cookie
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}
function readCookie(name)
{ //读cookie
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
这个是css代码,你把他保存为pub.css
/*===================================公共样式======================================== */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,Passlogin,table,td,img,div{margin:0;padding:0;border:0;line-height:20px;}
/*body { margin:0; color:#333; font:12px/1.6em 宋体, Arial, Tahoma, Verdana, Sans-Serif !important; font:11px/1.7em Verdana, Arial, Tahoma, Sans-Serif; text-align:center; }
ul,li,dl,ul,ol{list-style:none;}*/
body { margin:0; color:#009; font:12px "宋体",Lucida Grande, Verdana, Lucida, Arial, Helvetica, sans-serif; }
/*body{background:url("../images/b01.gif");}*/
h1,h2,h3,h4,h5,h6{ font-size: 12px; font-weight:bold;}
table { border-spacing: 0px; border-collapse: collapse; border-style:none;}
li,td {
font-size:12px;
line-height: 18px;
text-align: left;
}
select {font-size:12px; color:#333333;}
input {font-size:12px; color:#333333;}
img {border:0px;}
select,input{vertical-align:middle; padding:0; margin:0;}
form{padding:0px;margin:0px;}
.cls {clear:both; display:block;}
a:link {color:#009;}
a:visited {color: #009;}
a:hover{color: #F00; }
a:active {color: #F00;}
a.noline{text-decoration:none;}
.hand{cursor:pointer;}
.move{cursor:move;}
.tc{text-align:center;}
/*--公共body--*/
.bodyer{width:780px; margin: 0px auto;}
/*--内容样式 | 内边距样式--*/
.cont{padding:8px 8px 0px}
.contU{padding:8px;}
.contL{padding-left:8px;}
.contT{padding-top:8px;}
.contR{padding-right:8px;}
.contB{padding-bottom:8px;}
/*--外边距样式--*/
.marU{margin:10px;}
.marT{margin-top:10px;}
.marB{margin-bottom:10px;}
.marR{margin-right:10px;}
.marL{margin-left:10px;}
.marTR{margin-top:10px;margin-right:10px;}
/*--其他--*/
.fl{float:left;}
.fr{float:right;}
.fa{overflow:hidden;}
.borU{border:1px solid #CCC;}
.borL{border-left:1px solid #CCC;}
.borR{border-right:1px solid #CCC;}
.borB{border-bottom:1px solid #CCC;}
.borT{border-top:1px solid #CCC;}
.tit{font-size:12px;font-weight:bold;}
.blo{display:block;}
.scrol{overflow-y:auto;}
/*--标准宽度--*/
.w158{width:158px;}
.w160{width:160px;}
.w248{width:248px;}
.w250{width:250px;}
.w258{width:258px;}
.w260{width:260px;}
.w283{width:283px;}
.w285{width:285px;}
.w313{width:313px;}
.w315{width:315px;}
.w438{width:438px;}
.w440{width:440px;}
.w483{width:483px;}
.w485{width:485px;}
.w518{width:518px;}
.w520{width:520px;}
.w608{width:608px;}
.w610{width:610px;}
.w780{width:780px;}
.w778{width:778px;}
.h100{height:100px;}
.h200{height:200px;}
/*--============================私有样式=================================--*/
.span01{border:1px solid #FFC27F;margin-left:4px;cursor:pointer;height:9px;width:9px;overflow:hidden;display:inline;float:left;}
.span011{background:#CC3300;cursor:pointer;height:5px;width:5px;overflow:hidden;margin:2px;display:inline;float:left;}
.span02{border:1px solid #8EDCBF;margin-left:4px;cursor:pointer;height:9px;width:9px;overflow:hidden;display:inline;float:left;}
.span022{background:#006666;cursor:pointer;height:5px;width:5px;overflow:hidden;margin:2px;display:inline;float:left;}
.span03{border:1px solid #FFCC66;margin-left:4px;cursor:pointer;height:9px;width:9px;overflow:hidden;display:inline;float:left;}
.span033{background:#CC3300;cursor:pointer;height:5px;width:5px;overflow:hidden;margin:2px;display:inline;float:left;}
.span04{border:1px solid #D7C0F2;margin-left:4px;cursor:pointer;height:9px;width:9px;overflow:hidden;display:inline;float:left;}
.span044{background:#660099;cursor:pointer;height:5px;width:5px;overflow:hidden;margin:2px;display:inline;float:left;}
.span05{padding-top:5px;margin-right:30px;}
.span06{width:100%;}
.span07{margin-top:20px;}
#skinBg{background:#CCC;position:absolute;width:100%;height:100%;filter:alpha(opacity=80);opacity:0.8;}
.floatDiv{width:400px;height:200px;position:absolute;top:174px;left:245px;background:#FFF;}
.header{float:left;width:780px;background:url("../images/head.gif") no-repeat;margin-bottom:10px;height:100px;position:relative;}
.bton{margin-left:5px;height:22px;padding-top:2px;cursor:pointer;padding-left:5px;padding-right:5px;}
.inputs{height:18px;padding-top:2px;padding-left:2px;}
.imgUl,.imgUl li{margin:0px;padding:0px;display:inline;}
.imgUl{margin-left:6px;}
.imgUl li{list-style-type:none;float:left;margin-right:6px;height:100px;width:121px;background:#EEE;text-align:center;}
.imgUl img{height:100px;}
#testDiv{margin-left:110px;margin-top:20px;display:inline;}
#selectSkinDiv{margin-left:50px;display:inline;}
#begin{position:absolute;left:5px;}
#begin2{position:absolute;right:5px;}
.test1{border:1px solid #FFC27F;display:block;float:left;width:150px;}
.test1 .s01{background:url("../images/bg01.gif");margin:1px;height:22px;width:99%;float:left;}
.test1 .s02{background:url("../images/img01.gif") no-repeat 10px 4px;padding-left:30px;padding-top:4px;color:#CC3300;float:left;}
.test2{border:1px solid #8EDCBF;display:block;float:left;width:150px;}
.test2 .s01{background:url("../images/bg02.gif");margin:1px;height:22px;width:99%;float:left;}
.test2 .s02{background:url("../images/img02.gif") no-repeat 10px 4px;padding-left:30px;padding-top:4px;color:#006666;float:left;}
.test3{border:1px solid #FFCC66;display:block;float:left;width:150px;}
.test3 .s01{background:url("../images/bg03.gif");margin:1px;height:22px;width:99%;float:left;}
.test3 .s02{background:url("../images/img03.gif") no-repeat 10px 4px;padding-left:30px;padding-top:4px;color:#CC3300;float:left;}
.test4{border:1px solid #D7C0F2;display:block;float:left;width:150px;}
.test4 .s01{background:url("../images/bg04.gif");margin:1px;height:22px;width:99%;float:left;}
.test4 .s02{background:url("../images/img04.gif") no-repeat 10px 4px;padding-left:30px;padding-top:4px;color:#660099;float:left;}
.selectImgFrame{width:16px;height:16px;float:left;overflow:hidden;padding:2px;}
.selectImgFrame1{width:15px;height:15px;float:left;overflow:hidden;padding:0px;border-width:3px !important;}
.selectImg{float:left;cursor:pointer;}
这个也是CSS代码,你把他保存为skin1.css
.borU{border:1px solid #FFC27F;}
.borB{border-bottom:1px solid #FFC27F;}
.menu01{background:url("../images/bg01.gif");margin:1px;margin-bottom:0px;height:22px;}
.menu01Bg{background:url("../images/img01.gif") no-repeat 10px 4px;padding-left:30px;padding-top:2px;color:#CC3300;}
.bton{border:1px solid #FFC27F;background:url("../images/bg01.gif");color:#C30;}
.inputs{border:1px solid #FFC27F;}
9、网页设计使用弹出窗口还是浮出层好
最好 是浮出的，弹窗的就有一种强制性要去关闭窗口的感觉。用户体验不好。做浮窗的话你可以放在不影响页面内容的地方供用户选择。