datamobility
asked on
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.
<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.
ASKER
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.
Cheers,
.pd.
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()">
<script>
win=window.open()
</script>
<input onblur="win.focus()">
<input onblur="win.focus()">
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<script>
var mywin=false;
function openChild()
{
mywin = window.open("","","width=1
}
function lookAtTheChild()
{
try{mywin.focus()}catch(e)
}
document.onkeyup=lookAtThe
document.onmousedown=lookA
document.onmousemove=lookA
</script>
</head>
<body>
<button onclick="openChild()">
<p>open child</button><input> </p>
</body>
</html>
var mywin=false;
function openChild()
{
mywin = window.open("","","width=1
}
function lookAtTheChild()
{
try{mywin.focus()}catch(e)
}
document.onkeyup=lookAtThe
document.onmousedown=lookA
document.onmousemove=lookA
</script>
</head>
<body>
<button onclick="openChild()">
<p>open child</button><input> </p>
</body>
</html>
ASKER
@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.
> 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.
ASKER
[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"></scr
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=n
x_popup = window.open(p, 'modalPopup', pargs);
x_popup.focus();
}
function focusPopup()
{
try{x_popup.focus();}catch
}
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.
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"></scr
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=n
x_popup = window.open(p, 'modalPopup', pargs);
x_popup.focus();
}
function focusPopup()
{
try{x_popup.focus();}catch
}
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.
ASKER
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.
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.
ASKER
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.
Even when I paste the lookAtTheChild example as is into the script area in the ASPX, I can still focus the main window.
ASKER
Further Info:
Reclaiming focus at the textbox level won't work either because there's more than one.
Reclaiming focus at the textbox level won't work either because there's more than one.
>>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
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
ASKER
>> 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.
<!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_defaultClientScri
<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=n
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.
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
Button1.Attributes["onclic
}
#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.P
}
#endregion
}
}
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.
<!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_defaultClientScri
<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=n
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.
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
Button1.Attributes["onclic
}
#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.P
}
#endregion
}
}
ASKER
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.
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.
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=1
}
function lookAtTheChild()
{
try{mywin.focus()}catch(e)
}
document.onkeyup=lookAtThe
document.onmousedown=lookA
document.onmousemove=lookA
</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.
__________________________
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=1
}
function lookAtTheChild()
{
try{mywin.focus()}catch(e)
}
document.onkeyup=lookAtThe
document.onmousedown=lookA
document.onmousemove=lookA
</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.
ASKER
@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=n
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('Ne
container.Controls.Add(a);
}
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=n
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('Ne
container.Controls.Add(a);
}
I agree with datamobility.
BTW:
pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=n
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
BTW:
pargs = "height=" + h + "px,width=" + w + "px,resizable=no,menubar=n
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
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.
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.
copy + paste in Adress bar + push enter
javascript:void(document.b
javascript:void(document.b
ROFLMFAO...
alert("\n%74%68%61%6e%6b%2
you spelled "attention" wrong...
you spelled "attention" wrong...
thank you ee_ai_construct ;)
ASKER
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.
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.
no answer, probably not :)
thank you datamobility
thank you datamobility
ASKER
> thank you datamobility
javascript:alert('%4E%6F%7
javascript:alert('%4E%6F%7
;)
ASKER
eg
<body onload="window.showModeles
<input>
</body>