Solved

Modal Window-AJAX  ---VS2010

Posted on 2012-03-10
3
307 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This is a video describing the growing solar energy use in Utah. This is a topic that greatly interests me and so I decided to produce a video about it.
Delivering innovative fully-managed cloud services for mission-critical applications requires expertise in multiple areas plus vision and commitment. Meet a few of the people behind the quality services of Concerto.

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now