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
ES-ComponentsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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)
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
0
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.
Thanks...
Rick
0
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
0
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">
<head>
  <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>
</head>
<body>

<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>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Open in new window


Thank you
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ES-ComponentsAuthor Commented:
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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.