asked on

How to code an OnClick Pop-Up screen?

I am using Dreamweaver for my web page where I need to edit an item. The following code passes the ID from a web page to a table where it gets the item that needs to be edited and then displays it in a form on another web page. This works fine, absolutely no problem.

Code1:

<A HREF="/OpenOrders-EditComment.asp?<%= Server.HTMLEncode(MM_keepURL) + ((MM_keepURL!="")?"&":"") + "ID=" + OpenOrdersDelinquentALL.Fields.Item("ID").Value %>"><span class="style6">Edit</span><br>
              <span class="style6"><%=(OpenOrdersDelinquentALL.Fields.Item("ID").Value)%></span><br>
          </A>

Open in new window

What I would like to do is display the web page edit form in a small pop-up window on the screen. The following code works fine if the
web page edit form is JUST a regular hyperlink.

Code2:

 <a href="/AddDelinquentComments.asp" title="Add A Comment."target="name" class="style12 style39 style6" onClick="window.open(&#39;AddDelinquentComments.asp&#39;,&#39;name&#39;,&#39;height=380,width=390,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no&#39;);return false;">Add<br>
            <img src="/images/AddComment.png" width="33" height="36"></a>

Open in new window

Is there a way that I can get Code1 to be a Pop-up on the screen by somehow using part or all of Code2? I am not a programmer, and I have tried
to use parts of Code2 in Code1 but nothing seems to work.

If there is a way to do this I would greatly appreciate your help.

Thank you...
Rick

Julian Hansen

Lets get some terminology right first
Web pages pass values to the server which then renders a response and sends it back.
Currently, as I understand it, you have a list of items.
You click edit
The id of the item is passed back to the server and an edit form is rendered for that id and sent back to the browser.
You want this to change to a popup where the original page remains intact.

The question is - do you want a pseudo popup (a styled <div> that overlays the table)
OR
A new browser window that shows the popup.

The first uses AJAX to fetch the contents of the popup and again uses AJAX to submit the results back
The second creates a new browser window which can then communicate with the server as before.

The first option has advantages in that you don't have to implement inter-window communication but it does require a bit more code for handling the interface.

The next question (assuming the pseudo popup) is what library do you want to use
jQueryUI
Bootstrap
Custom build

ES-Components

ASKER

I need a pseudo popup (a styled <div> that overlays the table).
I am not a programmer. Use the library of whatever is the simplest and easiest to do.
Thanks...
Rick

Julian Hansen

Well it depends on what you are using already

A custom popup is simple to do (this article discusses how to do this https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html)

Bootstrap - would be used if you are already using Bootstrap.

jQueryUI has been around for some time - some don't like the way the dialog's are styled by default.

The complexity is in how you interact with events in the popup, how you translate those events into action either against the server / page or both and how you dismiss the popup.

Which route you go depends on your requirements.

Take a read of the article - see if that is going in the direction you want. Also take a look at jQueryUI and see if that is in the ballpark

ASKER CERTIFIED SOLUTION

mohan singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ES-Components

ASKER

Mohan,
I am not a programmer. When I put your code in I get a web page that says Modal Example
and a button that says Open Modal.

Where do I link the button to a popup screen?