`
clarancepeng
  • 浏览: 191625 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

页面提交时, 弹出一个等待层

阅读更多
最近几个月都没有好好打理自己的博客了, 今天一看, 访问量快一万了, 在此多谢那些关照的朋友了!

还是言归正传, 请往下看:
<HTML><HEAD>
<META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
<BODY><INPUT onclick="showdiv('数据加载中<br/>请稍候... <br/> 可以试一试');" type=button value=点击这里>
<SCRIPT language=javascript type=text/javascript>
  function closediv()
  {
  //Close Div
document.body.removeChild(document.getElementById("bgDiv"));
document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
document.body.removeChild(document.getElementById("msgDiv"));
  }
            function showdiv(str)
            {
                var msgw,msgh,bordercolor;
                msgw=400;//提示窗口的宽度
                msgh=100;//提示窗口的高度
                bordercolor="#336699";//提示窗口的边框颜色
                titlecolor="#99CCFF";//提示窗口的标题颜色
               
                var sWidth,sHeight;
                sWidth=document.body.offsetWidth;
                sHeight=document.body.offsetHeight;
               
                var bgObj=document.createElement("div");
                bgObj.setAttribute('id','bgDiv');
                bgObj.style.position="absolute";
                bgObj.style.top="0";
                bgObj.style.background="#777";
                bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
                bgObj.style.opacity="0.6";
                bgObj.style.left="0";
                bgObj.style.width=sWidth + "px";
                bgObj.style.height=sHeight + "px";
                document.body.appendChild(bgObj);
                var msgObj=document.createElement("div")
                msgObj.setAttribute("id","msgDiv");
                msgObj.setAttribute("align","center");
                msgObj.style.position="absolute";
                msgObj.style.background="white";
                msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
                msgObj.style.border="1px solid " + bordercolor;
                msgObj.style.width=msgw + "px";
                msgObj.style.height=msgh + "px";
              msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
              msgObj.style.left=(sWidth-msgw)/2 + "px";
              var title=document.createElement("h4");
              title.setAttribute("id","msgTitle");
              title.setAttribute("align","right");
              title.style.margin="0";
              title.style.padding="3px";
              title.style.background=bordercolor;
              title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
              title.style.opacity="0.75";
              title.style.border="1px solid " + bordercolor;
              title.style.height="18px";
              title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
              title.style.color="white";
              title.style.cursor="pointer";
              title.innerHTML="关闭";
              title.onclick=closediv;
              document.body.appendChild(msgObj);
              document.getElementById("msgDiv").appendChild(title);
              var txt=document.createElement("p");
              txt.style.margin="1em 0"
              txt.setAttribute("id","msgTxt");
              txt.innerHTML=str;
              document.getElementById("msgDiv").appendChild(txt);
      }


     

     
        </SCRIPT>
</BODY></HTML>
分享到:
评论

相关推荐

    jquery处理页面弹出层查询数据等待操作实例

    layer插件是一个非常流行的页面层元素创建工具,能够快速创建多种样式的弹出层,包括加载提示层、信息提示层、表单提交层等。 在$(document).ready(function(){});这一段代码中,layer.load(0);被用来初始化加载。...

    JS弹出遮罩层

    遮罩层点击时会调用`closeModal`,而假设页面中有一个id为`openBtn`的按钮,当点击该按钮时会调用`openModal`。 为了使登录和注册功能更完整,你需要在`modal`元素内添加对应的表单字段,如用户名、密码输入框,...

    4种用法的弹出框浮动层,可拖动.rar

    例如,当用户点击某个按钮触发弹出层加载数据时,Ajax可以后台请求服务器,返回数据后动态填充到弹出框内,这样用户可以看到加载过程,而不是等待整个页面刷新。 在实际应用中,开发者可能会根据项目需求对这四种弹...

    ThickBox关闭层自动刷新和页面数据提交冲突问题

    在开发过程中,遇到类似ThickBox弹出层与页面数据提交冲突的问题时,首先要仔细排查代码逻辑中的潜在问题。通过对问题的深入理解,选择合适的解决方案,可以有效避免这类问题的发生。同时,这也提醒我们在设计系统时...

    JQuery.BlockUI 弹出层

    总的来说,jQuery.BlockUI凭借其小巧的体积、丰富的功能和灵活的自定义能力,成为开发者在实现页面弹出层效果时的一个理想选择。结合适当的HTML和CSS,开发者可以轻松创建出符合项目需求的弹出层交互体验。

    弹DIV提交表单无刷新

    在网页设计中,"弹出DIV"通常指的是一个浮动或者模态的窗口,它会在用户进行特定操作(如点击按钮)时显示在页面上,展示表单或其它信息,而不会影响到页面的其他部分。弹出的DIV可以设计成透明半遮罩效果,以突出...

    jQuery实现注册和登录弹出层效果

    7. **关闭弹出层**:弹出层通常有一个关闭按钮,绑定点击事件关闭弹出层,同时可以添加动画效果使关闭过程更顺畅。 8. **响应式设计**:考虑到不同设备的屏幕尺寸,弹出层应具备响应式设计,以适应手机、平板等移动...

    Axure如何做出在当前页面跳出另一操作页面且在该操作提交后显示提示成功并退出第一操作页面

    本文档旨在详细介绍如何使用Axure RP软件在当前页面弹出一个操作页面,例如模拟用户进行缴费操作,并在操作完成后显示“成功”的提示信息以及自动关闭该操作页面。这种交互设计技巧常见于各种Web应用的设计过程中,...

    ie firefox做了一个遮罩层

    在网页开发中,"遮罩层"(Mask Layer)是一种常见的设计元素,它通常用于创建弹窗、提示或加载效果,使得用户在等待操作完成或查看特定内容时,其他页面元素变得不可见或半透明。"ie firefox做了一个遮罩层"这个标题...

    jQuery实现注册和登录弹出层效果.rar

    弹出层是一种常见的UI设计模式,它在用户与主页面交互时临时显示额外的信息或功能,而不会让用户离开当前页面。在注册和登录场景下,弹出层可以避免用户被重定向到新页面,从而保持页面的连续性和一致性。 要实现这...

    点击登陆弹出登陆框js代码

    这样,用户可以在B页面提交信息后,无须等待页面重载就能得到反馈。 Ajax的基本使用步骤如下: 1. 创建XMLHttpRequest对象,即Ajax的核心。 2. 使用open()方法设置请求的类型(GET或POST)、URL以及是否异步。 3. ...

    layer实现关闭弹出层刷新父界面功能详解

    在父页面打开弹出层时,我们可以设置这个回调来刷新页面: ```javascript parent.layer.open({ type: 2, title: '修改', shadeClose: false, shade: 0.8, area: ['30%', '45%'], maxmin: true, closeBtn: 1, ...

    zeroModal-扁平化风格jQuery弹出层插件.zip

    "zeroModal-扁平化风格jQuery弹出层插件.zip"是一个专为网页开发人员设计的轻量级工具,它将简洁的扁平化设计与高效实用的jQuery功能相结合,提供了一种优雅的方式来实现弹出层效果。 zeroModal.js是这个插件的核心...

    弹出层登录窗口ajax登录验证

    标题中的“弹出层登录窗口ajax登录验证”指的是在网页设计中使用Ajax技术实现的弹出式登录窗口的验证功能。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许网页在不重新加载整个页面的...

    layer组件 jquery弹出层,提示框提示按钮特效

    在进行一些需要用户等待的操作时,可以使用layer的锁屏功能,如`layer.full(document.body)`,这将使整个页面变为半透明背景,焦点集中于弹出层,提高用户操作的专注度。 五、实战应用 1. 操作确认:在用户进行...

    星级评论和弹出层 .net开发技术

    在.NET开发领域,星级评论和弹出层是常见的交互...通过以上技术的整合和优化,可以构建一个高效、易用的星级评论和弹出层系统,为用户提供无缝的交互体验。在.NET环境中,理解并掌握这些知识点对于开发者来说至关重要。

    设计用户注册页面

    在设计一个用户注册页面时,我们关注的焦点是创建一个友好、直观且安全的用户体验,同时确保收集到必要的用户信息。在这个场景中,用户需要填写的注册内容包括姓名、性别、出生年月以及兴趣爱好。当用户成功提交注册...

    js自定义弹出框

    非模态弹出框则允许用户在弹出框出现时仍能操作页面。实现模态效果,可以通过在弹出框上添加一个半透明的遮罩层,并监听遮罩层的点击事件,关闭弹出框。 6. **可复用性**:为了提高代码的复用性和维护性,可以将弹...

    模拟弹出选择框.zip

    在模拟弹出选择框的场景中,jQuery可以帮助开发者更方便地控制页面元素的显示和隐藏,实现动态效果,比如淡入淡出、滑动等,同时,它还提供了便捷的事件绑定机制,使得用户点击或交互时能够触发相应的弹出框。...

    弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认)

    `&lt;div&gt;` 是一个通用容器,可以容纳其他HTML元素,通过CSS样式控制其布局和外观,使其能够悬浮于页面上,形成一个弹出的效果。在JavaScript的帮助下,我们可以使这个弹出窗口具备动态行为,如拖动功能。 1. **拖动...

Global site tag (gtag.js) - Google Analytics