韦德国际1946英国 > 计算机网络 > AJAX实现遮罩层登录验证界面,jQuery弹出div层过

原标题:AJAX实现遮罩层登录验证界面,jQuery弹出div层过

浏览次数:150 时间:2019-08-24

使用:

测量试验浏览器:IE8、FF3.6.8、Google Chrome (IE第88中学弹出登入层后会出现竖拉条,别的三种未有出现,这一个竖拉条能够在JS中经过改造数值让其不出现,不过上边会出现白边,更加的感觉IE有一点那几个了......)
1、预览

$.blockUI({ message: $("#dialog")});
$("#cancel").click(function() {
$.unblockUI();
$(".blockUI").fadeOut("slow");
});

下面给我们分享一段代码关于jquery弹出div层并活动消失的贯彻代码,废话非常少说了,具体代码如下所示: 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
 <title>FlyNoteBook</title>
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="Scripts/common.js"></script>
 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="Scripts/login.js"></script>
 <asp:ContentPlaceHolder ID="HeadContent" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form runat="server">
 <div class="page">
 <div class="header">
 <div class="title">
   <img src="Images/Pictures/logo3.png" alt="FlyNoteBook Logo" />
  FlyNoteBook
 </div>
 <div class="loginDisplay">
 登录

 </div>
 <div class="clear hideSkiplink">
 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
  IncludeStyleBlock="false" Orientation="Horizontal">
  <Items>
  <asp:MenuItem NavigateUrl="~/Default.aspx" Text="首页" />
  <asp:MenuItem NavigateUrl="~/About.aspx" Text="关于" />
  </Items>
 </asp:Menu>
 </div>
 </div>
 <!--登录窗口:Begin-->
 <div id="divLoginWindow">
 <table style="width: 100%;" border="0" cellpadding="2" cellspacing="0">
 <tr style="background-color: #e0f3d9; border-bottom: #bfe5b3 solid 2px">
  <td style="height: 38px; width: 100px;">
   用户登录
  </td>
  <td>
  <img src="Images/Button/close.gif" id="closeBtn" align="absmiddle" alt="关闭" title="关闭" />
  </td>
 </tr>
 <tr>
  <td colspan="2" style="height: 5px;">
  </td>
 </tr>
 <tr>
  <td align="right">
   用户名:
  </td>
  <td>
   <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
  </td>
 </tr>
 <tr>
  <td align="right">
   密   码:
  </td>
  <td>
   <asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>
  </td>
 </tr>
 <tr>
  <td align="right">
   验证码:
  </td>
  <td>
   <asp:TextBox ID="txtCode" Style="width: 88px;" runat="server"></asp:TextBox>
  <img src="Code.aspx" id="imgRndCode" style="vertical-align: middle;" onclick="ChangeCode(this);"
  alt="验证码" title="看不清,点击图片更换图片" />
  </td>
 </tr>
 <tr>
  <td colspan="2" align="center">
  <a onclick="CheckLogin()" id="alogin">登 录</a>
  <img id="loading" src="Images/Loading/loading04.gif" alt="正在登录" title="正在登录..." />
  <br />

  </td>
 </tr>
 </table>
 </div>
 <!--登录窗口:End-->
 <div class="main">
 <asp:ContentPlaceHolder ID="MainContent" runat="server" />
 </div>
 <div class="clear">
 </div>
 </div>
 <div class="footer">
 <a href="http://www.cnblogs.com/Ferry/">By Ferry</a>
 </div>
 </form>
</body>
</html>

//显示遮罩
$.blockUI({
message: $('#divlogin'),
css:{width:"400px", height:"255px", top: ($(window).height() - 400) /2 'px', left: ($(window).width() - 400) /2 'px'}
});
//撤消遮罩
$("#cancel").click(function() {
$.unblockUI();
});

你只怕感兴趣的作品:

  • Jquery完毕遮罩层的简便实例(就是弹出DIV周围都灰溜溜无法操作)
  • jQuery Ajax PHP弹出层异步登入效果(附源码下载)
  • jQuery Mobile弹出窗、弹出层知识汇总
  • 依靠jQuery实现点击弹出层实例代码
  • jQuery点击按键弹出遮罩层且内容居中特效
  • Jquery插件之Fancybox丰裕的弹出层效果附源码下载

    1)登录前

撤废遮罩是,js 动态变化的外围未有未有。
在FF3.0.4,Chrome下都没难点,只是 IE6 IE7 Ie8下不健康。
张开源码,找到了下边那句话:

以上所述是作者给大家介绍的jQuery弹出div层过2秒自动消失,希望对我们有所扶助,假若大家有别的疑问请给自家留言,小编会及时还原大家的。在此也非常多谢我们对台本之家网址的支撑!

你大概感兴趣的小说:

  • JQuery 遮罩层达成(mask)达成代码
  • jquery弹出关闭遮罩层实例
  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
  • jQuery阻止移动端遮罩层后页面滚动
  • Jquery实现遮罩层的归纳实例(正是弹出DIV周边都灰溜溜不能够操作)
  • Jquery达成遮罩层的措施
  • jQuery遮罩层达成格局实例详解(附遮罩层插件)
  • jquery完结简单的遮罩层
  • jquery完成点击任何区域时遮蔽下拉div和遮罩层的不二秘技
  • 轻量级网页遮罩层jQuery插件用法实例
  • jQuery完结展开网页自动掸出遮罩层或点击弹出遮罩层功用示例

可以看看,在IE下,它是生成了贰个 iframe,并在这些 iframe 中加载你自个儿的对话框。
那么,以往只是外围不毁灭,自个儿手动让它未有。

HuiFang.Funtishi("请输入名字。");

 图片 1

复制代码 代码如下:

var HuiFang={
m_tishi :null,//全局变量 判断是否存在div,
//提示div 等待2秒自动关闭
Funtishi: function (content, url) {
if (HuiFang.m_tishi == null) {
HuiFang.m_tishi = '<div class="xiaoxikuang none" id="app_tishi" style="z-index:9999;left: 15%;width:70%;position: fixed;background:none;bottom:10%;"> <p class="app_tishi" style="background: none repeat scroll 0 0 #000; border-radius: 30px;color: #fff; margin: 0 auto;padding: 1.5em;text-align: center;width: 70%;opacity: 0.8; font-family:Microsoft YaHei;letter-spacing: 1px;font-size: 1.5em;"></p></div>';
$(document.body).append(HuiFang.m_tishi);
}
$("#app_tishi").show();
$(".app_tishi").html(content);
if (url) {
window.setTimeout("location.href='"   url   "'", 1500);
} else {
setTimeout('$("#app_tishi").fadeOut()', 1500);
}
},
}

2、实现

OK,IE6 IE7都得以了。
利用blockui后,遮罩层数据不能够交到到后台了,使用ajax能够
要付出到后来,请教后知道,遮罩层不再当前form中,所以提交后并未有form无法交付
化解办法,把遮罩层部分,放置到form中
$('#divlogin').parent().appendTo(jQuery("form:first"));---还为完全找到放到form外面包车型大巴遮罩层数据,所以不是很领会。

     使用VS二零零六创制叁个Web Site,此成效是在母版页Site.master中贯彻的。VS2008会自行增添JQuery的js文件到Scripts文件夹,并创建八个母版页和基于此母版页的Default.aspx和About.aspx八个窗体。

var lyr1 = ($.browser.msie) ? $('<iframe class="blockUI" style="z-index:' z ';border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="javascript:false;"></iframe>')
: $('<div class="blockUI" style="display:none"></div>');

以上正是jQuery达成遮罩层登陆分界面,AJAX完毕登陆验证的全体内容,希望对大家的就学抱有帮忙

你只怕感兴趣的稿子:

  • jQuery弹出遮罩层效果总体示例
  • jQuery达成弹出带遮罩层的居中浮动窗口功用
  • jQuery操作dom完毕弹出页面遮罩层(web端和移动端阻止遮罩层的滑行)
  • Jquery实现遮罩层的简短实例(正是弹出DIV周围都灰溜溜不能够操作)
  • 行使jQuery制作遮罩层弹出效果与利益的极简实例分享
  • jquery达成轻易的遮罩层
  • jQuery点击按键弹出遮罩层且剧情居中特效
  • jQuery AJAX实现遮罩层登陆验证分界面(附源码)
  • 据书上说jquery的blockui插件显示弹出层
  • jquery.blockUI.js上传滚动等待效果完毕思路及代码
  • jQuery达成带遮罩层效果的blockUI弹出层示例【附demo源码下载】

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:AJAX实现遮罩层登录验证界面,jQuery弹出div层过

关键词:

上一篇:无限分类,无限分类的树类代码

下一篇:没有了