,,基于jquery的blockui插件显示弹出层
在网站开发过程中，可能需要用到弹出层，使用jquery的blockui插件就可以轻松实现。
Blockui可以显示一个屏蔽层禁止用户操作页面，并在你发送ajax请求时显示提示信息；或者可以用来显示登陆窗口，也可以用来显示图片等等。Blockui插件主要使用blockUI和unblockUI两种方法来控制弹出层的显示或隐藏。您可以在blockUI方法中指定一些参数来控制弹出层的内容、大小和位置。blockUI方法常用的参数有：message、CSS、overlay CSS、show overlay。提示：主要用于设置要显示的内容。可以直接设置为一段文字，html代码或者使用jquery获取页面上隐藏的div。Css:主要用于设置弹出层的样式，包括位置、大小、边框等。OverlayCSS:主要用于设置蒙版图层的样式，包括背景色、透明度等。ShowOverlay:主要用于设置是否显示遮罩层，如果想隐藏遮罩层可以设置为false。下面举几个例子看看具体用法。在页面上导入jquery.min.js和jquery.blockui.js文件，具体实现代码如下：复制代码代码如下：$ ('# btnsubmit ')。单击(function () {$。blockui ({message: $ ('# LoginForm '))，CSS: {width:' 300px '，height:' 300px '，left: ($(window)。width() - 300)/2 'px '，top: ($(窗口)。height() - 300)/2 'px '，border:' none ' } })；});$ ('# btnlogin ')。单击(function () {$。blockui ({message:' H2正在登录，请稍候……/H2 '，CSS: {border:' 1px纯黑' } })；setTimeout(function () { $。un bocqui()}，1000)；});$('#btnCancel ')。单击(function () { $。un bocqui()；});对应的html代码是：复制代码如下：div ID=' log in form ' style=' display:none ' table tr TD用户名：/TD TD TD input ID=' txt username ' type=' text '/TD/tr tr TD密码：/TD input ID=' text '/TD/tr TD input ID=' btnlogin ' type=' button ' value=' log in '//TD TD input ID=' BTN cancel ' type=' button ' value=' cancel '//TD/tr
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。