关键语法如下：
layeropen({
type: 1,
content: $('#id') //这里content是一个DOM，这个元素要放在body根节点下
});
实例：
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<meta >
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-191minjs"></script>
<script src="layer/layerjs"></script>
<script>
$(function () {
$("a")click(function () {
layeropen({
type: 1,
closeBtn: false,
shift: 2,
shadeClose: true,
content: $("#box1")
});
})
})
</script>
<style>
{padding:0; margin: 0;}
#box1{width:555px; height:600px; background: #eee; display:none;}
</style>
</head>
<body>
<a href="#">点击</a>
<div id="box1">
111
</div>
</body>
</html>
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。
在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，IBM，Intuit等公司。
2009年1月，jQuery 13版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型JavaScript框架的查询速度，程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法，使用live()方法可以为当前及将来增加的元素绑定事件，在13版之前，如果要为将来增加的元素绑定事件，需要使用livequery插件，而在13版中，可以直接用live()方法。
2010年1月，也是jQuery的四周年生日，jQuery 14版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14com站点，带来了连续14天的新版本专题介绍。
在13及更早版本中，jQuery通过JavaScript的eval方法来解析json对象。在14中，如果你用的浏览器支持，则会使用原生的JSONparse解析json对象，这样对json对象的书写验证则更为严格。比如：{foo: "bar"}的写法将不会被验证为合法的json对象，必须写成{"foo":"bar"}。如果你的程序打算升级到14版本，那么这一点要尤其注意。
一个基本的d出层应该满足以下需求：
1、点击按钮/链接触发d出层，d出层应该有半透明的遮罩层；
2、点击d出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏d出层；
3、使用Esc键也可以关闭d出层；
4、它是响应式的，并且兼容现代主流浏览器。
HTML
1、首先我们在页面放置一个用来触发d出层的链接，也可以是个按钮button，注意的是我们给它设置一个data-show-layer属性，这个属性值对应的就是d出层的id，也就是说通过data-show-layer来关联d出层。
2、很显然，上面的链接关联的d出层的id是hw-layer。那好，选择我们来准备d出层hw-layer的html代码。
3、我们d出层的最外层，也就是遮罩层hw-overlay，我们会使用CSS控制它是一个半透明的层，用来隔开d出层和页面主体内容。r然后在hw-layer-wrap主体层内，我们可以设置d出层的内容，当然内容由你来定，我们本文结合实例d出层的内容是一个确认对话框，类似window的confirm()。内容使用了bootstrap的col-栅格布局，还用了glyphicon字体图标。其实最关键的就是需要遮罩层和主体层，内容可以根据项目需求自定义，因为它可能是个表单、也可能是个纯文字说明的内容。
CSS
1、CSS也是关键的部分，我们先设置遮罩层，它默认情况下应该是不可见的，位置上fixed固定的，并且是覆盖整个页面的，它还是半透明的，我们这里设置了背景黑色、透明度03，如background-color: rgba(0,0,0,03)。然后主体层hw-layer-wrap，我们设置它的宽度，计算它的位置。宽度我们可以预设一个值，高度由于内容多少不确定，这里我们不用设置一个具体的值，在后面的js部分会对高度处理，然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章：如何让DIV水平和垂直居中。d出层里面的内容样式可以自由设置，最后就是使用media query来设置小屏幕下的d出层居中的问题。
2、我们使用jQuery来处理触发d出层和关闭d出层效果，应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数，用来展示d出层。当点击按钮或链接调用这个showLayer(id)函数，它会渐现的效果展示，并且计算d出层的高度位移距离，使得d出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏d出层，fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭d出层以及使用Esc按钮的时候关闭d出层的代码。
3、其实到这里，一个基本的d出层效果已经做好了。我们这里只是做一个基本的d出层，你也可以进行继续扩展代码。我们看过很多d出层插件，很多都是动态直接 *** 作DOM的，也就是通过js代码先createElement，然后在将内容append到body里的，这种方式如果是频繁 *** 作DOM的话会消耗一定的性能，所以从性能角度考虑的话，我推荐使用本文提供的d出层方式。
回答人的补充 2009-12-24 19:44 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" " >
以上就是关于如何设置jquery layerd窗d层位置全部的内容，包括:如何设置jquery layerd窗d层位置、jquery layer怎么d出指定的html内元素、CSS能在点击一个按钮或是超连接时就d出一个层，并且在那个层里面显示我要显示的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）