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

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
Back to top 
Page 1 of 1
 Similar topics
» Sale/Lotto/Coupon Alert Thread
» Yet another guide to create opening chess book [PolyGlot]
» Create the Best Outfit using BABV PSI
» how to get one muxxu Account back after getting banned. (no Garantee!)
» Advice for creating a toy room

Permissions in this forum:You cannot reply to topics in this forum How To Forums :: How To - Myspace / Website /Blog Utilities :: ASP .net-
Jump to: