Rudebox.co.nr 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 ASP.net

View previous topic View next topic Go down 
AuthorMessage
Admin
Admin


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 ASP.net

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

The easy way with Ajax

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121

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

example

Code:
<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">
                <div>
                    <p>Choose the paragraph style you would like:</p>
                </div>
            </asp:Panel>
                <div>
                    <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>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB"
                            onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC"
                            onclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD"
                            onclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p style="text-align: center;">
                        <asp:Button ID="OkButton" runat="server" Text="OK" />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                    </p>
                </div>
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
            TargetControlID="LinkButton1"
            PopupControlID="Panel1"
            BackgroundCssClass="modalBackground"
            OkControlID="OkButton"
            OnOkScript="onOk()"
            CancelControlID="CancelButton"
            DropShadow="true"
            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

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

var unmovableObj;

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

function RepositionObjects (evt) {


// Move layer to center of window to show
   if (document.all) {   // Internet Explorer
      unmovable.style.left = (document.body.clientWidth/2) - (unmovable.offsetWidth/2);
      unmovable.style.top = 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";
      document.unmovable.top = 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").style.top = 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');   
//   unmovableObj.style.left = (pageOffsetX + (width / 2) - //(parseInt(objectWidth) / 2)) + 'px';
//   unmovableObj.style.top = (pageOffsetY + (height / 2) - //(parseInt(objectHeight) / 2)) + 'px';
}

window.onscroll = RepositionObjects;
   
    </script>



2. Create A Div in code

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">
</iframe>
                    <div style="position: absolute; z-index: 10;" id="unmovable">

ADD YOUR CONTENT HERE

</div>

</div>


3. Call Dialog from code behind

Whatever button handler you have to popup the modal

Code:
OnButtonClick(sender,e)
{
popupBox.Visible = true
}

Button/Link inside the modal to close

Code:
OnClose(sender,e)
{
//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

http://livepipe.net/projects/control_modal/
Code:
Back to top Go down
View user profile http://rudebox.editboard.com
 

Create Pop Up Alert Box , Modal Dialog Extender in ASP.net

View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Rudebox.co.nr How To Forums ::  :: -