Link to home
Start Free TrialLog in
Avatar of sirbounty
sirbountyFlag for United States of America

asked on

Displaying modal popup

I'm working on a web app - have a button that when clicked, I want to display a modal popup that will accept text (I'll be passing this text to a shelled process).
I want to use native tools, if possible.  Most everything I've found online either requires a tool install, or is a bit too complex for what I need.  I'm fairly new to web development, so go easy on me. :^)
Avatar of dimmergeek
Flag of United States of America image

To be clear, you want the user to click a button and open a modal window that you will be passing text to?
What do you want to do with the text, and how will you be passing it?  (hidden form element?  URL string?  Session variable?)

Is there an existing site we can see, or code you can post?
Avatar of sirbounty


User clicks a button, modal popup is presented.  User types their text in the pop up, and when they submit (click OK), it's then passed to a shelled process.

I don't yet have a site completed.  Think of this as a simple paging app.  I want the message to be submitted to a server-based application that will then forward that message to their wireless device.

Hope that helps explains it better.  I'm not sure about the session variable question : \
Avatar of dimmergeek
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry to be daft - this is my first web site :)
Where would I put this code?  On the main form?  After creating a 2nd form?
Do you have a main javascript file that you store all of your functions in?  If so, the popup script can go there.

The window.opener.close would be on the page that is sending the message to the mobile device.

Do you have existing code you can post, or a site you can link to so I can help you better?
Sorry, it's an internal/intranet site, so I can't link you to it. :(
I have 3 script files, by default, under a scripts folder.  They are:


I honestly don't know why these files are there.  They may be simply corporate templates, but I don't know which of the three I should place the code in.  Presumably I have to reference the script file from my code somewhere?

Each one of them has a good bit of code already in there.  If we can determine which to use, how do I determine where to place the code you posted?

I did have a javascript class years ago, so hopefully I won't need much help in adjusting things afterwards.  I do appreciate your help on this! :^)
YOu can place the code in any of the .js files you wish, you just need to link to that .js file in any page you want to use the function in.
How do I link to the js file?  (And should I simply create an empty one?  These others are quite large and I'm not, knowingly, using any of the functions there).

I also need to pass data to this popup - does your code allow for that?
You can link your .js file with the following line inserted within the 'head' of your web page file:

<script type="text/javascript" src="PATH_TO_FILE.js"></script>

The code I have above does not support passing data to the modal window, but it can be added.
It sounds like you want to open an existing HTML or ASP file with this modal window function, correct?

What type of data are you passing?
I currently have just an html page.  
My main page collects the person who is on-call from a database, so I'd like to pass that name to a label on my popup.  But I need their employee ID to send the page via the shelled command.
So, could I pass both?  If not, I suppose I could do an LDAP query from the popup...
If you query the data on your HTML page (make it an ASP or PHP page?) you can embed the data in the URL.

eg: popUp( Smith&empID=5551212....

then in your page (classic ASP shown)

empName = Request.QueryString("name")
empID = Request.QueryString("empID")

Alternatively, you can have the data in your first page in hidden form fields and call data from ASP page like so (this will keep data such as emplyee ID numbers out of sight)

empName = Request.Form("name")
empID = Request.Form("empID")

where 'name' and 'empID' are named text fields from your HTML page.
I don't know what I've done wrong, but it's not working. :(

 I created a modalPopUp.js file and pasted your code into it.
 I'm using a master page, so in my main page (default.aspx), I placed the script tag above under the "BodyContent" ...

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript" src="~/Scripts/modalPopup.js"></script>

I need something on my main page's button click event though, right?
My 'popup' page is simply called pager.aspx
Try this:

<script type="text/javascript">'pager.aspx?name=John Smith&empID=5551212','width=200,height=100,scrollbars=no,resizeable=no')

Open in new window

Then in your pager.aspx file:
empName = Request.QueryString("name")
empID = Request.QueryString("empID")
Do you mean in the button click event?

 Protected Sub btnPage_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles btnPage.Click
        <script type="text/javascript">'pager.aspx?name=John Smith&empID=5551212','width=200,height=100,scrollbars=no,resizeable=no')

    End Sub

Open in new window

That should work just fine
Hmm - that's giving me errors...that appears to be more html code, this is in my vb file (default.aspx.vb).  I would think I'd need to call a function from there somehow - just not sure how to point it to the javascript function. : \
The javascript function must either be in your master .js file, or on each HTML page you wish to call it from.
I don't feel that I was completely following everything you were suggesting, so I ended up going with the method outlined here (
For the most part, it is working for me, but I still have a few bugs to work out.  
Thanks for trying to help - hopefully I will slowly learn more about web development.