Solved

Modal Window-AJAX  ---VS2010

Posted on 2012-03-10
3
329 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
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.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.
Suggested Courses

710 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