Member Avatar for weblion
weblion -11 Newbie Poster 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="modalwindow._Default" %>

<!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">
<title>arun</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
<!-- Begin modal window --> 
<div class="boxes"> <!-- Container Div -->
    <div style="height:auto !important;padding-bottom:50px;margin-top:25px" id="test" class="window">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>

</div>
<!-- Container that fills the screen: do not remove! -->    
    <div class="mask"></div>
<!-- End container that fills the screen: do not remove! -->
<!-- End modal window -->

<style type="text/css"> 

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0}
html {margin:0;padding:0;border:0;}

body {
    line-height:1;
    font-size:13px;
    font-family: Arial,helvetica,sans-serif;
}

.mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  opacity:0.3 !important;
  filter:alpha(opacity=30)!important;
}   
.boxes .window {
  position:absolute;
  width:600px;
  background:#FFF;
  height:300px;
  display:none;
  z-index:9999;
  padding:10px;
  box-shadow:12px -5px 27px #333;
  border-radius:3px;
}
#boxes #dialog {
  width:375px;
  height:203px;
}
</style>

<a name="arun" style="font-size:40px;margin-top:50px;padding-left:20px;float:left;text-decoration:none" href="#test">click here molo</a>

<script type="text/javascript">
    $(document).ready(function () {
        $('a[name=arun]').click(function (e) {
            e.preventDefault();
            var id = $(this).attr('href');
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            $('.mask').css({ 'width': maskWidth, 'height': maskHeight });
            $('.mask').fadeIn(100);
            $('.mask').fadeTo("fast", 0.8);
            var winH = $(window).height();
            var winW = $(window).width();
            $(id).css('top', winH / 2 - $(id).height() / 2);
            $(id).css('left', winW / 2 - $(id).width() / 2);
            $(id).fadeIn('slow');
        });
        $('.window .close').click(function (e) {
            e.preventDefault();
            $('.mask, .window').hide();
        });
        $('.mask').click(function () {
            $('.mask').hide();
            $('.window').hide();
        });
    });
</script>
    </form>
</body>
</html>
Edited by Dani because: Formatting fixed
  • 1 Contributor
  • 0 Replies
  • 58 Views
mani-hellboy commented: tell what exactly you needed +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.