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

<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" />

<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>

<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>

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

OnClose(sender,e)
{
//Whatever you want to do here
popupBox.Visible = false
}