如何设置jquery layer弹窗弹层位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置jquery layer弹窗弹层位置相关的知识,希望对你有一定的参考价值。

关键语法如下:

layer.open(

type: 1,

content: $('#id') //这里content是一个DOM,这个元素要放在body根节点下

);

实例:

<!DOCTYPE html><html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="jquery-1.9.1.min.js"></script>

<script src="layer/layer.js"></script>

<script>

$(function ()

$("a").click(function ()

layer.open(

type: 1,

closeBtn: false,

shift: 2,

shadeClose: true,

content: $("#box1")

);

)

)

</script>

<style>

*padding:0; margin: 0;

#box1width: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 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

在jQuery迅速发展的同时,一些大的厂商也看中了商机。2009年9月,微软和诺基亚公司正式宣布支持开源的jQuery库,另外,微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员,其他成员还有Google,Intel,IBM,Intuit等公司。

2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。

2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。

在1.3及更早版本中,jQuery通过JavaScript的eval方法来解析json对象。在1.4中,如果你用的浏览器支持,则会使用原生的JSON.parse解析json对象,这样对json对象的书写验证则更为严格。比如:foo: "bar"的写法将不会被验证为合法的json对象,必须写成"foo":"bar"。如果你的程序打算升级到1.4版本,那么这一点要尤其注意。

参考技术A var pageii = $.layer(
type: 1,
title: false,
area: ['auto', 'auto'],
border: [0], //去掉默认边框
shade: [0], //去掉遮罩
closeBtn: [0, false], //去掉默认关闭按钮
shift: 'left', //从左动画弹出
page:
html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>'

);本回答被提问者采纳

以上是关于如何设置jquery layer弹窗弹层位置的主要内容,如果未能解决你的问题,请参考以下文章

入门layer

如何得layui-layer弹层组件的宽高

layui简单小问题,如何将下面的弹层事件绑定到按钮AA上

layer弹层遮罩挡住窗体解决

jQuery Layer 弹层组件

jQuery Layer 弹层组件