• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 58
  • Last Modified:

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.

<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>

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.

 <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...
  • 2
  • 2
1 Solution
Julian HansenCommented:
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)
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
Custom build
ES-ComponentsAuthor Commented:
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.
Julian HansenCommented:
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
mohan singhWeb developerCommented:
If you want to pop up modal box
so you can use bootstrap pop up modal

Copy this code and run it will work
<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this all is library of bootstrap-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


Open in new window

Thank you
ES-ComponentsAuthor Commented:
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?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now