正文
div弹出jquery,div弹出层 菜鸟教程
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
如何用jquery弹出 一个Div，让其在文本框下面显示
div input id='input1' type='text' /div
div id='b' style='position:absolute;left:20px;top:20px;display='none''/div//自己调整left和top的值将下面的div定位在上一个div的正下方
引如jquery文件
script
$(function(){
$("#b").hide();
$("#input1").focus(function(){
$("#b").slideDown("slow");
});
$("#input1").blur(function(){
$("#b").slideUp("slow");
});
});
/script
jquery 点击标签弹出DIV
php我不知道怎么做，不知道和jsp是不是一样的，不会php
1、在jsp中，你用jquery或者javascript非常好实现，当点击性别时，点击就是个事件，这个事件所要做的事情就是显示一个男女的DIV
2、当在男女的DIV上选择了性别后，隐藏这个div，并且在性别那显示我们所选择的性别男或女，我可以可以在隐藏的时候，把选择的那个男或者女赋
值给性别DIV中的性别那一栏
3、学习下jqeury或者javascript实现起来超容易
4、下面是我写的js代码，你看你php能否同样做出来，按照这个方法
!DOCTYPE
html
head
!-- 声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码 --
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
!-- 当前页面三要素 --
titletitle/title
meta name="Author" content="cn.huanghaiping"
meta name="Keywords" content="关键词,关键词"
meta name="Description" content="描述"
!-- css , js --
/head
body
divinput type="text" id="sextxt"input type="button" value="性别" id="sex" onclick="showsex()"/div
div id="sexradio" style="margin-top:10px;display:none;"
input type="radio" name="sex" value="男" onclick="selectsex(this)" 男
input type="radio" name="sex" value="女" onclick="selectsex(this)" 女
/div
script
function showsex(){
document.getElementById("sexradio").style.display = "block";
}
function selectsex(o){
document.getElementById("sextxt").value = o.value
document.getElementById("sexradio").style.display = "none";
}
/script
/body
/html
jQuery怎么控制一个div定时弹出来然后过一段时间定时关闭
问题分析：
首先来分析一下这个功能的两个步骤。
1、弹出：当页面初始化完毕后，等待N秒显示出div标签。
2、关闭：当div标签弹出后，再等待N秒后将其关闭。
解决方案：
可以使用JavaScript的setTimeout方法来做定时功能。
案例如下：
此案例设置页面初始化后5秒弹出div标签，再等5秒后关闭div标签。
HTML代码：
div我是DIV的内容/div
CSS代码：
div{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #000;
color: #FFF;
display: none;
}
JavaScript代码：
setTimeout(function(){
$('div').show(); //将DIV标签显示出来。
setTimeout(function(){
$('div').hide(); //将DIV标签隐藏。
}, 5000);
}, 5000);
页面初始化时为空白，5秒后的效果为：
点击一个按钮如何使一个div以弹框形式显示，用jquery实现？
style type="text/css"
div{
display:none;
position: absolute;
left: 50%;
top:50%;
margin-left:-div的宽度;
margin-top:-div的高度;
}
/style
script type="text/javascript"
$("buttom").cilck(function(){
$("div").show();
})
/script
div/div
buttom按钮/buttom
jquery 实现DIV的弹出
$(function(){
// 点击按钮，DIV弹出隐藏
$('#btn1').toggle(function(){
$('#div1').show();
},function(){
$('#div1').hide();
});
// 点击按钮，DIV弹出，点击body任意地方隐藏div
$('#btn2').click(function(){
if ( event event.stopPropagation ) {
// this code is for Mozilla and Opera
event.stopPropagation();
}
else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}
$('#div2').show();
});
$(document).click(function(){
$('#div2').hide();
});
});
以上都必须要基于，div的css是合理的。
其中 event.stopPropagation(); 和 window.event.cancelBubble = true; 是阻止事件冒泡的写法，建议自行百度学习。
css：（这里用了fixed，不考虑兼容性）
/* 水平垂直居中的div */
#div1,#div2{
position: fixed;
top: 50%;
left: 50%;
background:red;
width:100px;
height:100px;
margin:-50px 0 0 -50px;
display:none;
}
同样的功能有很多插件，例如fancybox，fancyzoom等
