`
zhouchaofei2010
  • 浏览: 1104393 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

模态窗口中,防止提交时页面刷新弹出新的页面

 
阅读更多

 

在模态窗口中,如有提交按钮,点击后会弹出新的页面。解决此问题有两种方法: 
1、在head中,添加<base target="_self">注意:不要在form中再添加target="_self" 否则失效 
2、把弹出的窗口页面做成框架网页,去加载要展示的网
如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子, 

  test6.htm 
  =================== 
  <script> 
    window.showModalDialog( "test7.htm ") 
  </script> 

  test7.htm 
  =================== 
  if(window.location.search)   alert(window.location.search) 
  <frameset   rows= "0,* "> 
    <frame.   src= "about:blank "> 
    <frame.   src= "test8.htm "> 
  </frameset> 

  test8.htm 
  =================== 
  <form.   target= "_self "   method= "get "> 
  <input   name=txt   value= "test "> 
  <input   type=submit> 
  </form> 
  <script> 
  if(window.location.search)   alert(window.location.search) 
  </script> 
3、另外一种解决方法
  1. First and foremost, add the HTML tag (<base target=”_self” />) to the head sectionof your HTML document. Depending on your method of refreshing the form, adding this tag may be sufficient.
    <html>
    <head>
    <base target="_self" />
  2. Next check to see if your modal dialog now correctly refreshes itself.In some cases the modal dialog will still open a new window. For instance if you were using a JavaScript self.location.href= command then you will need to replace this with a simulated hyperlink click event.
    • To do so, add a hyperlink to your page that is styled to be invisible (ie: <a href=”" id=”goLocation” style=”display:none;”>).
    • Then replace your JavaScript self.document.location.href = ‘test.html’; with a click command to your hidden hyperlink as follows:
      document.getElementById('goLocation').href = 'test.html';
      document.getElementById('goLocation').click();

参考 :http://jwcooney.com/2011/12/22/showmodaldialog-opens-a-new-window-on-submit-or-location-href/

 

参考 :http://blog.sina.com.cn/s/blog_4c6e822d0100r6jr.html


分享到:
评论

相关推荐

    javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码

    替换 location.href 当需要关闭第N(N&gt;1)层的模态窗口,并刷新第N-1层的模态页面时, 为防止刷新时弹出新窗口, 可以通过returnValue 以传递返回值给第N-1层模态窗口,来确认是否需要刷新 在按钮的提交事件中: 代码 ...

    模态窗口登陆

    6. **AJAX异步提交**:为了提供更好的用户体验,登录通常使用AJAX异步提交,这样用户无需等待页面刷新就能看到反馈。后端返回验证结果,前端根据结果决定是否关闭模态窗口并更新界面状态。 7. **安全考虑**:在处理...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    假设弹出的窗口是一个包含表单的页面,当用户填写完表单并点击提交按钮时,可以在JavaScript中设置返回值。 ```javascript function submitForm() { // 这里是表单验证等逻辑 window.returnValue = true; // ...

    jquery_dialog 弹出窗口

    在本实例中,我们关注的是`jquery_dialog`,这是一个jQuery插件,专门用于实现弹出窗口效果。这个插件使得在网页中创建各种形式的对话框变得简单而高效,比如警告消息、确认框或者自定义内容的弹窗。 首先,我们来...

    百度弹出登陆框

    弹出登录框(通常称为模态窗口或对话框)是在用户浏览网页或使用应用时,突然出现在当前页面中央的一个小窗口,要求用户提供登录信息。这种设计可以使用户保持在当前浏览的页面上,而无需跳转到单独的登录页面,从而...

    jquery+js+html实现弹出登录窗口

    在实现弹出登录窗口时,jQuery提供了方便的API来操作DOM元素,如`$("#elementId")`用于选取指定ID的元素,`.show()`和`.hide()`控制元素的显示与隐藏,`.fadeIn()`和`.fadeOut()`则可以实现平滑的显示和消失效果。...

    JS变灰页面显示遮罩层登录窗口,使页面无法操作

    在网页设计中,有时我们需要实现一种效果:当用户需要进行登录或者其他重要操作时,页面会变成灰色,同时弹出一个登录窗口,以防止用户在未完成该操作前误触其他功能。这种效果通常通过JavaScript(JS)配合CSS来...

    .net 刷新页面后弹出重试框的解决方法

    在Web应用开发中,特别是在使用.NET框架构建网页时,用户经常会遇到在关闭模式窗口之后父页面刷新导致弹出重试消息框的问题。这个问题产生的原因与HTTP协议中的GET和POST请求方式有关。 首先,我们来解释一下POST和...

    jquery弹出窗口,兼容各大浏览器,可做弹出登录框等!

    这种弹出窗口可以防止用户在处理弹出内容之前与页面其余部分进行交互,从而提高用户体验。 实现jQuery弹出窗口的关键在于理解jQuery的DOM操作和事件处理。以下是一些相关知识点: 1. **DOM操作**:jQuery提供了...

    登 陆 模 态 窗 口

    登录模态窗口是网页设计和应用开发中的一个重要概念,它是一种弹出式的用户界面元素,用于在用户与主页面交互时请求额外的信息或执行特定操作。在这个场景中,"登陆模态窗口"指的是在用户尝试访问受保护内容或进行...

    服务器端弹出对话框确认

    在IT行业中,服务器端弹出对话框确认是一种常见的交互设计技术,主要应用于用户提交关键操作前需要确认的情景。在Web应用中,我们通常通过JavaScript或者服务器端脚本实现这一功能,以确保用户对即将执行的操作有...

    点击按钮弹出登陆对话框

    这样可以保持页面的流畅性,而不会因为页面刷新打断用户的体验。 6. **响应式设计**:考虑到不同设备的屏幕尺寸和方向,对话框应具有响应式布局,以适应移动设备和平板电脑等不同平台。可以利用CSS的媒体查询(`@...

    点登陆弹出登陆对话框的层

    当用户点击“登录”按钮时,一个半透明的、漂浮在当前页面上方的层(也称为模态窗口或弹出层)会显现出来,显示登录表单。这样,用户可以输入用户名和密码,然后提交表单进行身份验证。 实现这样的功能需要以下关键...

    ASP.NET源码——仿迅雷博客弹出登录窗口.zip

    这个源码示例是关于如何在ASP.NET中创建一个仿迅雷博客的弹出登录窗口,它提供了用户身份验证的功能,使得用户能够在不离开当前页面的情况下进行登录操作,提升了用户体验。 首先,这个项目的核心在于使用了AJAX...

    大气登录页面切换登录

    如果项目采用模态窗口,当用户点击“注册”或“登录”按钮时,会弹出相应的表单,而背景页面会被半透明遮罩覆盖,提供一种在单一页面内切换的感觉。这种方式可以使用JavaScript库如jQuery UI或Bootstrap来实现。另一...

    仿迅雷博客,弹出用户登陆窗口的js库源码及例子

    4. **模态对话框**:弹出的登录窗口可能是一个模态对话框,阻止用户与背景页面的交互,直到对话框被关闭。JavaScript库可能会使用CSS来实现这种效果,或者使用现有的库如jQuery UI或Bootstrap的modal组件。 5. **...

    关于layui 弹出层一闪而过就消失的解决方法

    在使用layui框架开发Web应用时,可能会遇到弹出层(如对话框或模态窗口)在页面上瞬间显示后立即消失的问题。这个问题通常与JavaScript事件处理、DOM操作或库之间的版本冲突有关。针对这种情况,我们可以从以下几个...

    jQuery实现的腾讯电脑管家论坛点击登录弹出登录窗口效果源码(支持二维码扫描).zip

    该资源是一个基于jQuery实现的腾讯电脑管家论坛登录弹窗效果的源码,它包含了点击登录按钮后弹出一个登录窗口的功能,并且这个窗口还支持二维码扫描登录,这在现代网页应用中是一个常见的交互设计。接下来,我们将...

    jQuery基于bootstrap实现响应式弹出表单注册登录代码.zip

    在本项目中,jQuery可能被用于触发弹出框的显示和隐藏,处理用户输入验证,以及在表单提交时发送Ajax请求,实现无刷新的用户体验。 2. **Bootstrap**:Bootstrap提供了响应式布局,意味着页面可以根据设备屏幕尺寸...

    jsp知识积累

    #### 弹出页面提交后返回原页面 在Web开发中,弹出窗口(或模态对话框)常用于提供额外的信息输入或确认操作,尤其是在需要用户进行特定操作而不离开当前页面的场景下。JSP(Java Server Pages)环境下实现这一功能...

Global site tag (gtag.js) - Google Analytics