正文
jquery弹出div,jquery弹出模态框
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
如何用jQuery在浏览器窗口中央弹出一个DIV
style
.box{width:400px;height:400px;background:#f00;position:fixed;top: 50%;left: 50%;}
/style
var html = 'div class="box"/div';
$('body').append(html);
var L = $('.box').width();
var T = $('.box').height();
$('.box').css({
"margin-left":-L/2,
"margin-top":-T/2
})
如何用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的弹出
$(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等
