How To Forums

Rudebox How To Forums - Ask Anything, View How To's
HomeFAQSearchRegisterMemberlistUsergroupsLog in
Share | 

 Create Pop Up Alert Box , Modal Dialog Extender in

View previous topic View next topic Go down 

Number of posts: 216
Registration date: 2007-01-01

PostSubject: Create Pop Up Alert Box , Dim Background like imeem login   Fri Dec 21, 2007 12:34 am

This HOW TO has various different methods to show the Modal Dialog / Confirmation Dialog (server side) / Modal Popup Extender / Dialog Box in

Please see all . The first 2 have been tested by me

The easy way with Ajax

Download Ajax Tool Kit with No Source and open the Sample website in
Visual Studio, and make the Modal Popup as your start page for explanation

Basic things you have to do
a)Add the Ajax Tool Kit.dll into your project (add reference)
b)Register the Ajax Tool kit on your page/control

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

d)Call the Modal Command in your aspx


<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />
        <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
            <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
                    <p>Choose the paragraph style you would like:</p>
                        <input type="radio" name="Radio" id="RadioA" checked="checked"
                            onclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA"
                            style="padding: 3px;">Sample paragraph text</label>
                        <input type="radio" name="Radio" id="RadioB"
                            onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">Sample paragraph text</label>
                        <input type="radio" name="Radio" id="RadioC"
                            onclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">Sample paragraph text</label>
                        <input type="radio" name="Radio" id="RadioD"
                            onclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD"
                            style="padding: 3px;">Sample paragraph text</label>
                    <p style="text-align: center;">
                        <asp:Button ID="OkButton" runat="server" Text="OK" />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
            PopupDragHandleControlID="Panel3" />

If Nothing works this method will - works with Dot Net Nuke (DNN) also

because it has been created and tested by me

1. Add javascript to tag

<script type="text/javascript" language="JavaScript">

var unmovableObj;

window.onload = function(evt) {
   unmovableObj = document.getElementById("unmovable");

function RepositionObjects (evt) {

// Move layer to center of window to show
   if (document.all) {   // Internet Explorer = (document.body.clientWidth/2) - (unmovable.offsetWidth/2); = document.body.scrollTop+(document.body.clientHeight/2) - (unmovable.offsetHeight/2);
       document.getElementById("popUpIframe").height= document.body.scrollHeight ;
       document.getElementById("popUpIframe").width= document.body.scrollWidth ;         
   } else if (document.layers) {   // Netscape
      document.unmovable.left = (window.innerWidth/2) - 100 +"px"; = pageYOffset+(window.innerHeight/2) -50 +"px";
       document.popUpIframe.height = document.body.scrollHeight + "px";
      document.popUpIframe.width = document.body.scrollWidth + "px";
   } else if (document.getElementById) {   // Netscape 6+
      document.getElementById("unmovable").style.left = (window.innerWidth/2) - 100 +"px";
      document.getElementById("unmovable") = pageYOffset+(window.innerHeight/2) -50 +"px";
      document.getElementById("popUpIframe").height = document.body.scrollHeight + "px";
      document.getElementById("popUpIframe").width = document.body.scrollWidth+ "px";

   //alert((pageOffsetX + (width / 2)) + 'px');   
// = (pageOffsetX + (width / 2) - //(parseInt(objectWidth) / 2)) + 'px';
// = (pageOffsetY + (height / 2) - //(parseInt(objectHeight) / 2)) + 'px';

window.onscroll = RepositionObjects;

2. Create A Div in code

<div id="popupBox" runat="server" visible="false">
<iframe frameborder="9" src="about:blank" style="background: white; border: 0px;
                        position: absolute; z-index:9; left: 0px; top: 0px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100); filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;}" id="popUpIframe">
                    <div style="position: absolute; z-index: 10;" id="unmovable">




3. Call Dialog from code behind

Whatever button handler you have to popup the modal

popupBox.Visible = true

Button/Link inside the modal to close

//Whatever you want to do here
popupBox.Visible = false

4. How to show as progress / Loading Bar

a. 1 st way : Button On Click , Show the the div through javascript , make it visible through javascript, use styles
b. 2nd way : Put in the Progress Update Panel if using Ajax (asp:UpdateProgress)

For A Simple Alert box - Not Modal Click Here

Here is an article to look at how to create a pop up alert box and confirmation box , like the one you see in imeem login

dim the background , to create an alert message

Click Here for Instructions

Download Instructions

Download Source Code

Solution 2

Click Here To Download Instructions : 2nd Solution

Solution 3
Back to top Go down
View user profile
Create Pop Up Alert Box , Modal Dialog Extender in
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
» CREATE a new battlenet account?
» C&C Red Alert 2....
» Lottery Alert!
» Looking for someone to create a logo...
» Googrish (Create an English dub using Google Translate)

Permissions in this forum:You cannot reply to topics in this forum How To Forums ::  :: -
Jump to: