how to make background Inactive when inline popup raised : The Official Microsoft ASP.NET Forums

Reply

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 05:45 AM|LINK

You can use Jquery modal popup...

http://plugins.jquery.com/project/modaldialog

Nirav Bhatt
Software Engineer
Visit my Blog: ASP.Net Ajax Tutorials

Please Mark as Answered If post is helpful.

Reply

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 06:00 AM|LINK

Sorry...If we fade out the controls are working....we need to be diable....I sthere any way to stop background form Inctive like the form when modelpopup raised...

Thank you

Thanks
Rajasekhar
If you have an apple & I have an apple & we exchange our apples, then each of us will still have only 1 apple but if you have an idea & I have an idea & we exchange our ideas, then each of us will have 2 ideas

Edited by mannavas on Oct 04, 2010 09:25 AM
Edited by mannavas on Oct 04, 2010 09:25 AM

Reply

raghav_khung...

All-Star

32835 Points

5563 Posts

MVP

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 10:27 AM|LINK

It can be done. You need to cover the entire window with an overlay and the same is done by most of the modal plugins. Here is the sample, on click of link a layer is scattered over the window , you need to apply the same logic before your modal is opened:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
        .fade
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 99;
            background: black;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
    <div id="fade" class="fade">
    </div>
    <a href="#" id="aFoo">Test</a>
    </form>
</body>
<script type="text/javascript">
    $('#aFoo').click(function () {
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#fade').css({ 'width': maskWidth, 'height': maskHeight })
        .fadeIn(1000).fadeTo('slow', 0.7);
        return false;
    });
</script>
</html>

Now to close the overlapped screen you need to apply "$('#fade').fadeOut();"

Raghav|My Articles|My Blog

Marked as answer by mannavas on Oct 05, 2010 11:33 AM

Reply

mannavas

Member

48 Points

75 Posts

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 10:51 AM|LINK

thank you for your reply.....

here I dont want to fade it......I want to Inactive the background part

Thanks
Rajasekhar
If you have an apple & I have an apple & we exchange our apples, then each of us will still have only 1 apple but if you have an idea & I have an idea & we exchange our ideas, then each of us will have 2 ideas

Reply

raghav_khung...

All-Star

32835 Points

5563 Posts

MVP

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 11:06 AM|LINK

mannavas

thank you for your reply.....

here I dont want to fade it......I want to Inactive the background part

Did you run my sample ? the background has been made inactive.

Raghav|My Articles|My Blog

Marked as answer by mannavas on Oct 05, 2010 11:39 AM

Reply

mannavas

Member

48 Points

75 Posts

Re: how to make background Inactive when inline popup raised

Oct 04, 2010 11:15 AM|LINK

I am using VS2003,the css property not working......plz tell me how?

Thanks
Rajasekhar
If you have an apple & I have an apple & we exchange our apples, then each of us will still have only 1 apple but if you have an idea & I have an idea & we exchange our ideas, then each of us will have 2 ideas

how to make background Inactive when inline popup raised RSS

23 replies

mannavas