[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2082
  • Last Modified:

Popup window using onblur=self.focus() - can't enter text in TextBox

So I've got this popup window I want to stay on top so I have

<body onblur="self.focus()">

But then I can't edit the textboxes on the form.  How do I get this popup to behave like a modal and still be able to edit it?

Cheers,
.pd.
0
datamobility
Asked:
datamobility
  • 12
  • 6
  • 6
  • +1
1 Solution
 
GwynforWebCommented:
use a modeless dialog, they are more difficult to communicate with the opening window though, see http://www.webreference.com/js/column90/

eg

<body onload="window.showModelessDialog('http://www.google.com')">
<input>
</body>
0
 
datamobilityAuthor Commented:
Oh yeah - and I don't want to use showModalDialog because I've just changed it from that after running into problems there as well.

Cheers,
.pd.
0
 
GwynforWebCommented:
I said  showModelessDialog not showModalDialog, this has been asked a number of times qand I have not seen a solution with popups.  You could add the window refocusing onblur of the text boxes. eg

<script>
win=window.open()
</script>

<input onblur="win.focus()">
<input onblur="win.focus()">
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
devicCommented:
maybe better control it from parent window:

=======================
<html>
<head>
<script>
var mywin=false;
function openChild()
{
      mywin = window.open("","","width=100,height=100");
}
function lookAtTheChild()
{
      try{mywin.focus()}catch(e){};
}
document.onkeyup=lookAtTheChild;
document.onmousedown=lookAtTheChild;
document.onmousemove=lookAtTheChild;
</script>
</head>
<body>

<button onclick=openChild()>open child</button>
</body>
</html>
0
 
GwynforWebCommented:
<script>
var mywin=false;
function openChild()
{
     mywin = window.open("","","width=100,height=100");
}
function lookAtTheChild()
{
     try{mywin.focus()}catch(e){};
}
document.onkeyup=lookAtTheChild;
document.onmousedown=lookAtTheChild;
document.onmousemove=lookAtTheChild;
</script>
</head>

<body>
<button onclick="openChild()">
<p>open child</button><input> </p>
</body>
</html>
0
 
datamobilityAuthor Commented:
@GwynforWeb

> I said  showModelessDialog not showModalDialog

My afterthought and your first message passed in the air, I think - look at the timestamps.  ;-)

Speaking of timestamps, the lookAtTheChild solution works but devic did post it 5 hours earlier so I think the right thing to do is to award the points to devic.

Thanks to both of you for your help.

.pd.
0
 
datamobilityAuthor Commented:
[Points increased]

Hmm.  I put it in my app and it doesn't work from there.

I have HtmlAnchor in the server side code:

  a.Attributes["onclick"] = "popupModal('name.aspx', '240', '80');";

The ASP has a <script type="text/javascript" src="'popupModal.js"></script> in it.  (
I've also tried internalising the script).

popupModal.js looks like this:

            var x_popup = false;

function popupModal(p, w, h)
{
      pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=no,scroll=no,help=no,status=no";
      x_popup = window.open(p, 'modalPopup', pargs);
      x_popup.focus();
}

function focusPopup()
{
  try{x_popup.focus();}catch(e){};
}

document.onkeyup = focusPopup;
document.onmousedown = focusPopup;
document.onmousemove = focusPopup;

focusPopup isn't getting called.  I can see from the View Source that the main page contains all the script...

Cheers,
.pd.
0
 
datamobilityAuthor Commented:
I should of course have specified exactly *what* isn't working (can't believe I did that!)

The popup appears but I can still click on the main window and take focus away from the popup without closing it.  focusPopup() never gets called (I stuck an alert in there temporarily to test that).

.pd.
0
 
datamobilityAuthor Commented:
Further info:

Even when I paste the lookAtTheChild example as is into the script area in the ASPX, I can still focus the main window.
0
 
datamobilityAuthor Commented:
Further Info:

Reclaiming focus at the textbox level won't work either because there's more than one.
0
 
GwynforWebCommented:
>>My afterthought and your first message passed in the air, I think - look at the timestamps<<

sorry, I now see they that now. :-)

I meant add acomment to mt last post, it is to illustrate that method Deic posted does not wprk
0
 
datamobilityAuthor Commented:
>> I meant add acomment to mt last post, it is to illustrate that method Deic posted does not wprk

Well, the only difference between them is the quotes around the onclick attribute value but that's beside the point: neither one works when placed inside the script section of an ASPX file as below:

I don't know whether the problem is ASP.NET or Javascript now - should I be asking elsewhere?

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="modalPopup.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>WebForm1</title>
            <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" Content="C#">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <script type="text/javascript">
            var x_popup = false;

function popupModal(p, w, h)
{
      pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=no,scroll=no,help=no,status=no";
      x_popup = window.open('', 'modalPopup', pargs);
      x_popup.focus();
      
      document.onmousedown = focusPopup;
      document.onkeyup = focusPopup;
      document.onmousemove = focusPopup;
}

function focusPopup()
{
  try
  {
    x_popup.focus();
  }
  catch(e)
  {
  }
}
            </script>
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 64px" runat="server"
                        Text="Click me"></asp:Button>
            </form>
      </body>
</HTML>

// code behind

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace modalPopup
{
      /// <summary>
      /// Summary description for WebForm1.
      /// </summary>
      public class WebForm1 : System.Web.UI.Page
      {
            protected System.Web.UI.WebControls.Button Button1;
      
            private void Page_Load(object sender, System.EventArgs e)
            {
                  // Put user code to initialize the page here
                  Button1.Attributes["onclick"] = "popupModal('PwdPage.aspx', '230', '80');";
            }

            #region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                  //
                  // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                  //
                  InitializeComponent();
                  base.OnInit(e);
            }
            
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {    
                  this.Load += new System.EventHandler(this.Page_Load);

            }
            #endregion
      }
}
0
 
datamobilityAuthor Commented:
Well that's very interesting.

I coudn't get it to work with an ASP button and HtmlAnchor only works if you don't specify the ServerClick event (which means my hover CSS doesn't work anymore but you can't have everything apparently).

Can anyone explain why that is?

.pd.
0
 
GwynforWebCommented:
The last code I posted does not work, I know that.  I posted it to show you that it does not work.  I should have posted this:-

____________________________________________________________________________________________________

Devic, the code you have posted may work for a button but you will notice that when I add a text box to your code, as below, you cannot get the focus of the text box

 <script>
var mywin=false;
function openChild()
{
     mywin = window.open("","","width=100,height=100");
}
function lookAtTheChild()
{
     try{mywin.focus()}catch(e){};
}
document.onkeyup=lookAtTheChild;
document.onmousedown=lookAtTheChild;
document.onmousemove=lookAtTheChild;
</script>
</head>

<body>
<button onclick="openChild()">
<p>open child</button><input> </p>
</body>
</html>

______________________________________________________________________________________________________


That I hope clarifies what I am trying to say, ie I know it does not work and some thing else must be tried.


I can do this with a modeless dialog and a hidden popup, but you have stated that you do not want to use dialogs. As such I do not know how to answer your question.
0
 
datamobilityAuthor Commented:
@GwynforWeb

Your example does not contain a textbox.  It's the same one as previously posted.  

Here's what I'm using right now and it's working perfectly.  The javascript is an adaptation of the solution, which, although it contained a typo, was originally posted by devic.

.pd.


In the ASPX file:

<script type="text/javascript">
var x_popup = false;

function popupModal(p, w, h)
{
      pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=no,scroll=no,help=no,status=no";
      x_popup = window.open(p, 'modalPopup', pargs);
      x_popup.focus();
      
      document.onmousedown = focusPopup;
      document.onkeyup = focusPopup;
      document.onmousemove = focusPopup;
}

function focusPopup()
{
  try
  {
    x_popup.focus();
  }
  catch(e)
  {
  }
}
</script>

In the ITemplate linked to a DataGrid instantiated in the aspx.cs code behind:

void InstantiateIn(Control container)
{
  HtmlAnchor a = new HtmlAnchor();
  a.Attributes["href"] = "javascript:popupModal('NewPage.aspx', '230', '80')";
  container.Controls.Add(a);
}
0
 
devicCommented:
I agree with datamobility.


BTW:
pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=no,scroll=no,help=no,status=no";

it's the same with:
pargs = "height=" + h + "px,width=" + w + "px";


window.open(p, 'modalPopup', "third argument");
if  the third argument is not blank, every feature by default=no
0
 
GwynforWebCommented:
The code I  have posted is to illustrate that the idea devic posted does not work and as such is not going to work otherwise it would not  illustrate the point that Devics code does not work,  cause if did then it would illustrate that Devics code does work when in fact Devics code does not  fact work.

The code does contain a text box and  focus can not be obtained on it hence illustrating the fact that Devics code does not work.

The purposes of my posts has been to illustrate that Devics code does not work and is not suggesting a solution to the problem you have posted but a contribution to finding one by illustraing that an idea does not work and as such has to elimiated or modified.

0
 
devicCommented:
copy + paste in Adress bar + push enter

javascript:void(document.body.innerHTML=document.body.innerHTML.replace(/(does not work)/gi,"<span style=background:red>$1</span>"));alert("\n%74%68%61%6e%6b%20%79%6f%75%20%47%77%79%6e%2c%20%66%6f%72%20%79%6f%75%20%61%74%74%65%74%69%6f%6e");void(location="http:Q_21209078.html#12618532")

0
 
ee_ai_constructCommented:
ROFLMFAO...
0
 
ee_ai_constructCommented:
alert("\n%74%68%61%6e%6b%20%79%6f%75%20%47%77%79%6e%2c%20%66%6f%72%20%79%6f%75%20%61%74%74%65%6e%74%69%6f%6e");

you spelled "attention" wrong...
0
 
devicCommented:
thank you ee_ai_construct ;)
0
 
datamobilityAuthor Commented:
Maybe you've misunderstood the question, GwynforWeb.

Your "<input>" is in the MAIN page.  

I want to:

(1) create a popup
(2) put a textbox ***in the popup***
(3) prevent focus shifting from the popup
(4) still be able to enter text in the textbox popup

devic's solution, with the appopriate modification to summon a page that actually contains a textbox, works perfectly.

Are you against devic receiving credit for this solution?

.pd.
0
 
devicCommented:
no answer, probably not :)

thank you datamobility
0
 
datamobilityAuthor Commented:
> thank you datamobility

javascript:alert('%4E%6F%74%20%61%74%20%61%6C%6C%20%2D%20%74%68%61%6E%6B%20%2A%79%6F%75%2A%20%64%65%76%69%63%21');
0
 
devicCommented:
;)
0
 
datamobilityAuthor Commented:
Heh, yeah.  www.fluid-exchange.com.

.pd.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 12
  • 6
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now