jQuery: The Write Less, Do More JavaScript Library

|

»

jQuery Dev List

Making backgroud inactive and blur when a popup panel loads

View: New views

3 Messages — Rating Filter: Alert me

	Making backgroud inactive and blur when a popup panel loads by Priya-29 :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message Hello, In my project,i am handling popup messages through the asp panel and div controls.when that popup comes by clicking a button say btnsend, the background ie the page should become inactive,no button click or any other functionality should not be done.. The popup panel's css class is popupcurve .popupcurve { width:45%; color: #000000 !important; border: 15px solid #cecdbb; background-color: #FFFFFF; position: fixed !important; top: 40%; left: 25%; z-index: 105; } The page is like this <body> <asp:Button runat="server" ID="butn" Text="Send" /> <asp:Panel ID="PnlConfirmation" runat="server" CssClass="popupcurve" Visible="false"> <div class="popupcurve_inside" > <table style="width: 100%;"> <tr> <td align="center"> <asp:Button ID="btnok" runat="server" Text="OK" /> </td> </tr> </table> </div> </asp:Panel> </form> </body> Please help me -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@.... To unsubscribe from this group, send email to jquery-dev+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.
	Re: Making backgroud inactive and blur when a popup panel loads by jaubourg :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message You just use a div that covers the whole body below the popup div and, thus, intercepts clicks. You can toy with the div background color and opacity to get a "page fading out" effect. You can also have that "cache" div handle click to close the popup. Anyway, this question would better suited for the general jQuery discussion since this list we're on is about jQuery's internals. I'm curious though, with all the popup libs for jQuery around, why would you make a new one? No tricky question, I made a popup plugin myself because I needed some specific functionalities. 2009/11/4 Priya <prythms@...> Hello, In my project,i am handling popup messages through the asp panel and div controls.when that popup comes by clicking a button say btnsend, the background ie the page should become inactive,no button click or any other functionality should not be done.. The popup panel's css class is popupcurve .popupcurve { width:45%; color: #000000 !important; border: 15px solid #cecdbb; background-color: #FFFFFF; position: fixed !important; top: 40%; left: 25%; z-index: 105; } The page is like this <body> <asp:Button runat="server" ID="butn" Text="Send" /> <asp:Panel ID="PnlConfirmation" runat="server" CssClass="popupcurve" Visible="false"> <div class="popupcurve_inside" > <table style="width: 100%;"> <tr> <td align="center"> <asp:Button ID="btnok" runat="server" Text="OK" /> </td> </tr> </table> </div> </asp:Panel> </form> </body> Please help me -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@.... To unsubscribe from this group, send email to jquery-dev%2Bunsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en. -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@.... To unsubscribe from this group, send email to jquery-dev+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.
	Re: Making backgroud inactive and blur when a popup panel loads by Byte1234 :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message Here is the solution.. 1. Take 2 DIV containers name them (for example) as OuterDIV and InnerDIV. InnderDIV inside OuterDIV. 2. Assign class OuterDivClass to OuterDIV . 3. Assign class InnerDivClass to InnerDIV. Observe that when OuterDIV gets displayed it occupies complete screen due to height and width set to 100%. For your project put the Panel withing InnerDIV. Adjust the InnderDiv height and width according to panel. Don't forget include InnerDIV within OuterDIV. It should work. .InnerDivClass { background-color: #E6E6FF; border-style: outset; display:none; width: 400px; height: 300px; top: 25%; left: 35%; position: relative; } .OuterDIVClass { font-family: arial,helvetica,clean,sans-serif; font-size: small; display: block; position: fixed; opacity: 0.75; filter: alpha(opacity=95); height: 100%; width: 100%; background-color: #333333; top: 0%; left: 0%; } Good luck... On Nov 4, 5:52 am, Priya <pryt...@...> wrote: > Hello, > > In my project,i am handling popup messages through the asp panel and > div controls.when that popup comes by clicking a button say btnsend, > the background ie the page should become inactive,no button click or > any other functionality should not be done.. > > The popup panel's css class is popupcurve > > .popupcurve > { > width:45%; > > color: #000000 !important; > border: 15px solid #cecdbb; > background-color: #FFFFFF; > position: fixed !important; > top: 40%; > left: 25%; > z-index: 105; > > } > > The page is like this > <body> > <asp:Button runat="server" ID="butn" Text="Send" /> > <asp:Panel ID="PnlConfirmation" runat="server" CssClass="popupcurve" > Visible="false"> > <div class="popupcurve_inside" > > <table style="width: 100%;"> > <tr> > <td align="center"> > <asp:Button ID="btnok" runat="server" Text="OK" /> > </td> > </tr> > </table> > </div> > </asp:Panel> > > </form> > </body> > Please help me -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@.... To unsubscribe from this group, send email to jquery-dev+unsubscribe@.... For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.