Solved

Modal Window-AJAX  ---VS2010

Posted on 2012-03-10
3
314 Views
Last Modified: 2012-03-11
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
0
Comment
Question by:niceguy971
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
aboo_s earned 500 total points
ID: 37706190
<script type="text/javascript">

var myContactInfo = document.getElementById('enterContactInfo');
myContactInfo.style.display='none'; //this will hide the div
myContactInfo.style.display=' '; //this will show it.
myContactInfo.value= ' ';
myContactInfo.innerHTML=' This just a plain text<br> what do you think?  ';

// etc..
</script>
0
 

Author Comment

by:niceguy971
ID: 37706408
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.
0
 

Author Closing Comment

by:niceguy971
ID: 37707551
Thanks
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question