Avatar of niceguy971
niceguy971 asked on

Modal Window-AJAX ---VS2010

The code for UPdatePanel is shown below. Can you please show me how to use AJAX/javascript to display Modal Window in the center of the screen when User clicks on Button1?    The content of the window is in <div id="enterContactInfo"..>

How Can i control in javaScript the Text (value) property of each Textbox ?

How Can i control in javaScript the ForeGroundColor and BackGroundColor property of each Textbox ?   The code is below:

-----ModalWindow.aspx--------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalWindow.aspx.cs" Inherits="WebApplication3.ModalWindow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   
    <script type="text/javascript">
 
    </script>
   
    <title>Show Modal window on click</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    Some info shown HERE  <br /> <br />
   
        <br />
   
   <asp:Button ID="Button1" runat="server" Text="Contact Info" Width="106px" UseSubmitBehavior="false"/>
 
    </div>

    <div id="enterContactInfo" style="display:none">

    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
  <ContentTemplate>
    <table class="style1" runat="server" id="FormTable">
      <tr>
        <td colspan="2">
 
              <asp:ScriptManager ID="ScriptManager1" runat="server">
              </asp:ScriptManager>
           
           
            <h1>
                &nbsp;</h1>
 
          <p>Enter your name  and e-mail address </p>
        </td>
      </tr>
      <tr>
        <td>
          Name
        </td>
        <td>
          <asp:TextBox ID="Name" runat="server"></asp:TextBox>
        </td>

      </tr>
      <tr>
        <td>
          E-mail address
        </td>
        <td>
          <asp:TextBox ID="EmailAddress" runat="server"></asp:TextBox>
        </td>
       </tr>

    </table>

  </ContentTemplate>
</asp:UpdatePanel>


    </div>


    </form>
</body>
</html>
-------------------------------&&&&&&&&&&&&&&&&&&&&

Thanks
ASP.NETC#

Avatar of undefined
Last Comment
niceguy971

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Anwar Saiah

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
niceguy971

Please answer the following questions below : #1, 2. 3, 4, 5:

1) Can I add OnClientClick event to the Button1?  So the code for the Button1 looks like

<asp:Button ID="Button1" runat="server" Text="Contact Info" Width="106px" UseSubmitBehavior="false" OnClientClick="ShowWindowInTheCenter()"/>

The code for the function ShowWindowInTheCenter():

<script type="text/javascript">

var myContactInfo = document.getElementById('enterContactInfo');

var myName = document.getElementById('Name');  // 1st textbox
myName.value= ' '; // textbox Name should Not display any value at the beginning

var myEmailAddress = document.getElementById('EmailAddress');  // 2nd textbox
myEmailAddress.value=' ';   //   textbox Name should Not display any value at the beginning

myContactInfo.style.display=' '; // display window

</script>

2) What do I need to change in the code to display window  {div-->"enterContactInfo"} in the center of the screen  AND Make windows dimensions = 50% of screen dimensions ?
  So it will look like pop-up in the center of the screen..it should not cover the whole screen.

3) How can I make this pop-up window movable so the user will be able to move it?

4) How can I access  the Forecolor and BackGroundColor of each textBox?

I would like to control the font color and Backgrounf color in the textBox..when the user enters the info

5) Is there something like GetFocus() event for the TextBox and how I control it in javaScript?  

I'm going to Add 'Save' button And 'Cancel' button to the  div-->"enterContactInfo" --the User should be able to save the info he Enters.
ASKER
niceguy971

Thanks
Your help has saved me hundreds of hours of internet surfing.
fblack61