Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Modal Window-AJAX  ---VS2010

Posted on 2012-03-10
3
Medium Priority
?
348 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…
Suggested Courses
Course of the Month15 days, 13 hours left to enroll

580 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