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、網頁設計使用彈出窗口還是浮出層好
最好 是浮出的，彈窗的就有一種強制性要去關閉窗口的感覺。用戶體驗不好。做浮窗的話你可以放在不影響頁面內容的地方供用戶選擇。