jquery弹出div窗口,jquery弹出新窗口
jquery怎么让页面弹出窗口
html
创新互联主要从事网站设计制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务资溪,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
headtitleSimple 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=""/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
pp
form
username:input type="text"/p /
age:input type="text"/p /
input type="submit" value="submit"/br /
/form
/div
/body
/html
以上代码直接复制粘贴，html文件就可以运行，可以做弹出操作。
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，让其在文本框下面显示
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的弹出
$(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等
如何用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窗口,jquery弹出新窗口
文章分享：http://myzitong.com/article/dsseodp.html