1.jQuery中的弹出窗口怎么写
可以使用bootstrap 的模态框(Modal)插件。
可以切换模态框(Modal)插件的隐藏内容:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。通过 JavaScript:使用这种技术,可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:$('#identifier').modal(options)。
2.jquery 怎么写出以下弹窗 新手求赐教
$(document).ready(function () {$("#id").on('click', function () { //给ID号为id的按钮绑定一个点击事件。
$("body").append(""); //给body追加一个div。 $("#mask").addClass("mask").fadeIn("fast"); //给这个div加样式,让它快速淡入。
$("#Box").slideDown("fast"); //让id号为box的div显示出来(弹出框)。 });}); CSS #box{display:none;}.mask{margin:0;padding:0;border:none;width:100%;height:100%;background:#cccccc;opacity:0.6;filter:alpha(opacity=60);z-index:9999;position:fixed;top:0;display:none;left:0;}。
3.JQ如何实现网页弹窗
通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击;无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中;点击页面的关闭按钮,弹出层消失,页面恢复原样。
这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》,使弹出窗口可以始终固定在浏览器的正中间。在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰。
我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就“负责”使页面变灰。点击关闭后,删除这个层就能使页面恢复原样。
不知道有没有更好的方法,有的话请告诉我哦。其他应该没什么问题了,还是很简单的,在这里顺便贴上jQuery代码:$(function(){var screenwidth,screenheight,mytop,getPosLeft,getPosTopscreenwidth = $(window).width();screenheight = $(window).height();//获取滚动条距顶部的偏移mytop = $(document).scrollTop();//计算弹出层的leftgetPosLeft = screenwidth/2 - 260;//计算弹出层的topgetPosTop = screenheight/2 - 150;//css定位弹出层$("#box").css({"left":getPosLeft,"top":getPosTop});//当浏览器窗口大小改变时。
$(window).resize(function(){ screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth/2 - 260; getPosTop = screenheight/2 - 150; $("#box").css({"left":getPosLeft,"top":getPosTop+mytop});});//当拉动滚动条时。$(window).scroll(function(){ screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth/2 - 260; getPosTop = screenheight/2 - 150; $("#box").css({"left":getPosLeft,"top":getPosTop+mytop});});//点击链接弹出窗口$("#popup").click(function(){ $("#box").fadeIn("fast"); //获取页面文档的高度 var docheight = $(document).height(); //追加一个层,使背景变灰 $("body").append(""); $("#greybackground").css({"opacity":"0.5","height":docheight}); return false;});//点击关闭按钮$("#closeBtn").click(function() { $("#box").hide(); //删除变灰的层 $("#greybackground").remove(); return false;}); }); html代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">
<meta ; charset=utf-8" />