jquery彈窗js代碼_手機網站首頁彈窗JS代碼

『壹』 Jquery 彈窗popup_layer.js插件問題

你這個明顯是不行的，JS代碼是一開始就載入綁定事件，但是不一定用你要綁定的元素，你需要先輸出元素再綁定事件。把順序調一下，可能會好一些，你不妨試試。如果你的ID是動態生成的，那就比較復雜一點了

『貳』下載 jquery UI 彈窗demo（css js html）詳細步驟

下載JQ ui 彈窗demo可按照以下步驟完成：

1，打開JQ ui，點擊download按鈕，如下圖：

『叄』仿百度登陸彈窗的JS或者jquery代碼求詳細

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>div布局</title>

<scripttype="text/javascript"src="http://libs..com/jquery/1.3.2/jquery.min.js"></script>

<styletype="text/css">
.corInsertHref
{
position:absolute;
z-index:10000;
width:370px;
float:left;
display:none;
background-color:#fff;
padding:10px;
}
.corBackground
{
width:100%;
height:100%;
position:absolute;
background-color:#000;
top:0;
left:0;
filter:alpha(opacity=30);
-moz-opacity:0.30;
-khtml-opacity:0.30;
opacity:0.30;
z-index:9999;
display:none;
}
</style>

<scripttype="text/javascript">
$(function(){
//點擊登錄按鈕彈出層並初始化彈出層位置
$("#btnlogin").click(function(){
$("#corBackground").animate({opacity:"show"},"slow");
$("#corInsertHref").animate({opacity:"show"},"slow");
autoSize($("#corInsertHref"));
});
//窗口大小縮放事件
$(window).resize(function(){
autoSize($("#corInsertHref"));
});
//窗口大小縮放時調整彈出層的位置
varautoSize=function(corObj){
varwWidth=$(window).width(),wHeight=$(window).height();
varihWidth=corObj.outerWidth(true),ihHeight=corObj.outerHeight(true);

corObj.css({"top":((wHeight-ihHeight)/2)+"px","left":((wWidth-ihWidth)/2)+"px"});
}
});
</script>

</head>
<body>
<spanid="btnlogin">登錄</span>
<divid="corInsertHref"class="corInsertHref">
<p>
賬號<inputid="txtName"type="text"/></p>
<p>
密碼<inputid="txtPwd"type="text"/></p>
<p>
<inputtype="button"value="登錄"/></p>
</div>
<divid="corBackground"class="corBackground">
</div>
</body>
</html>

粗略的寫了下，可以嗎？

『肆』 PC端用jquery實現點擊，頁面中間出現彈出層，手機上點擊能彈出，放大屏幕，彈出層不居中。跪求大神

1.讓層始終顯示在屏幕正中間：

樣式代碼：
Html代碼
.model{
position: absolute; z-index: 1003;
width:320px; height:320px; text-align:center;
background-color:#0066FF; display: none;
}

jquery代碼：
Js代碼
//讓指定的DIV始終顯示在屏幕正中間
function letDivCenter(divName){
var top = ($(window).height() - $(divName).height())/2;
var left = ($(window).width() - $(divName).width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}

html代碼：

Html代碼
<a href="javascript:;" onclick="letDivCenter('#model')">點我讓DIV始終顯示在屏幕中間</a><br />
<div>
<div id="model" class="model">
這是內容（不過沒閉念有垂直居中顯示）希望各位高手，能夠補充。小弟在此謝過了。
<鬧槐/div>
<液態友/div>

『伍』 jquery怎麼讓頁面彈出窗口

<html>
<head><title>Simple jsp page</title>
<style type="text/css">
<!--
#div1 {
position:absolute;
left:338px;
top:91px;
width:446px;
height:294px;
z-index:1;
border:solid #7A7A7A 4px;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").hide(); //先鎮臘讓div隱藏
$("#span1").click(function(){

$("#div1").fadeIn("slow");//淡入淡出羨宴效果顯示div
});
$("#span2").click(function(){
$("#div1").fadeOut("slow");//淡入淡出效果隱藏div
})
});
</script>
</head>
<body>
1個簡單彈出div的小例子頁面不是很美觀效果達到了<p/><p/><p/><p/><p/><p/>
<span style="cursor:pointer" id="span1">點我彈出div</span>
<兄旅銀div id="div1">
<div align="right" style="background-color:#CDCDCD;"><span id="span2" style="cursor:pointer">關閉</span>
</div>
<p><p>
<form>
username:<input type="text"/><p />
age:<input type="text"/><p />
<input type="submit" value="submit"/><br />
</form>
</div>
</body>
</html>
以上代碼直接復制粘貼，html文件就可以運行，可以做彈出操作。

『陸』 jquery ui dialog 怎麼讓彈窗1秒後自動關閉

<script>
$(function(){
$("#dialog").dialog({
autoOpen:false,
show:{
碧脊鍵effect:"blind",
ration:1000
},
hide:{
effect:"explode",
ration:1000
}
});

$("#bt").click(function(){
$("#dialog").dialog("open");
setTimeout(function(){$("#dialog").dialog("close");},1000);
});
});
</script>
</head>
<body>
<buttonid="bt">打開</button>
<divid="dialog"title="基本的對話框">
<p>這是一個默認的對話框，用於顯示信息。對話框窗口可以移動，調整尺寸，默認可野老通過'x'圖標悔巧關閉。</p>
</div>

帶動畫的，需要引入jquery-ui.min.css，jquery.min.js，jquery-ui.min.js

『柒』 js點擊按鈕彈出窗口或層,javascript,ajax,jquery,mobile,html,代碼

可以用jquery.ui 的dialog來實現

$("#dialog").dialog({
title:"標題",
height:140,
width:320,
modal:true,
open:function(){
	jQuery("#dialog").html(data);
},
buttons:{
Cancel:function(){
$(this).dialog('close');
}
}
});

這里是簡單的寫法，帶了一個Cancel按鈕。這里的data就是你要在彈出框內里顯示的內容容，是一段html代碼，例如一段文字：

<p>顯示詳細內容</p>

當然，也可以是一個form表單。

另外，如果dialog自帶的那個取消按鈕你不想用，可以把buttons那段刪了，在data中寫一段完整的頁面，可以在那裡面寫一個button

『捌』求一段感應滑鼠彈窗的代碼，CSS JS jquery都可

onmouseover事件.用JS去綁定這個事件
<碼世input name="test" type="submit" value="提交" width="200" height="100" id="test"高模掘 onmouseover="a();" /戚核>
<script>
function a()
{
alert('這里是事件');
}
</script>

『玖』手機網站首頁彈窗JS代碼

// 注意引用jquery.js 和 jquery.cookie.js
$(function () {
var date = new Date().getDay();
if($.cookie("date") == undefined || $.cookie("date") == null){
// 說明當天沒有打開這個彈窗，打開彈窗
alert("彈窗內容自己寫，專可以使用dialog");
$.cookie("date",date,7); //cookie 的有效時屬間為 7 天
}else{
var cookieTime = $.cookie("date"); // 獲取cookie保存的時間
if(cookieTime != date){
alert("彈窗內容自己寫，可以使用dialog");
$(".alert-info").dialog("open");
}
}
});

『拾』 javascript或jQuery實現自動彈出層可自動關閉源代碼，如何實現

<style>
html,body{margin:0;padding:0;width:100%;height:100%;font-size:36px;}
#bak{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)}
#box{position:absolute;left:50%;top:50%;width:400px;height:240px;margin-left:-200px;margin-top:-120px;background-color:#fff}
</style>
<spanid="s1">10</span>秒後會自動彈出層
<divid="bak">
<divid=box>
<spanid="s2">20</span>秒後會自動關閉層
</div>
</div>
<script>
$(function(){
vars=10;
functionshowLayer(){
setTimeout(function(){
$("#s1").text(--s);
if(s){
showLayer();
}else{
$("#bak").show();
s=20;
functionhideLayer(){
setTimeout(function(){
$("#s2").text(--s);
if(s){
hideLayer();
}else{
$("#bak").hide();
}
},1000);
}
hideLayer();
}
},1000);
}
showLayer();
});
</script>

如果不需要計數，那就很簡單了（只列出js代碼了）：

<script>
$(function(){
setTimeout(function(){
$("#bak").show();
setTimeout(function(){
$("#bak").hide();
},20000);
},10000);
});
</script>

導航:首頁 > 編程語言 > jquery彈窗js代碼

jquery彈窗js代碼

與jquery彈窗js代碼相關的資料

友情鏈接