1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default modal panel not really modal

    modal panel not really modal


    Hi everyone,

    I'm having some trouble with my modal Panel created as follows:
    Code:
    YAHOO.options.panel = new YAHOO.widget.Panel("options", { width:"30em", height:"30em", zIndex:10001, fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:false, modal:true } );
    The panel show up, but only the empty parts of the window are covered by the modal layer (ie I can still click elements). What could be the cause ?


    Thanks in advance

    edit : Just thought about that : my page is made up of elements positioned with absolute coords, might it be the reason ?

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I made these two changes to container.css:
    Code:
    .mask {
        z-index:10000; 
    }
    
    .panel {
       z-index:10001;
    }
    The problem is the mask is z-index:0 or 1 and passing a z-index to the dialog doesn't change the mask z-index. I set them both to a ridiculous z-index in one shot in the css file and never worry about it again.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default


    Unfortunately it doesn't do the job for me
    I couldn't find a mask class in the css so I created it my self to change the z-index, without any success...

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    .mask is the 7th selector in container.css.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default


    I actually found it on my own (Aptana wasn't showing it in the outline for whatever reason) but anyway, it does not change anything...
    I'll try to change these absolute positioned elements tommorow, and i'll see if that's not the cause. I don't know I have the feeling only the parts not covered by one of these elements are affected by the mask, but for now, time to sleep

    Thanks for your help

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The other thing is making sure your panel is rendered into the body element and not a child element.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default


    That's how I've organised the code :
    Code:
    <body>
        <div>Some content</div>
        </div id="thepanel>the panel</div
    </body>
    Seems ok to me :/

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Can you put up a link? I'd be happy to take a look at it.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default


    I'll put that up on a live server as soon as possible, thanks for the offer

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    gooopil is on a distinguished road

      0  

    Default


    http://www.ecocitoyen-inprogress.inf...piece=Chambree

    Click on the "objet" button, you'll see the panel

Similar Threads

  1. Modal panel behind mask in yui-ext layout
    By Tym in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 21 Nov 2008, 7:11 AM
  2. Div Modal
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 14 Mar 2007, 5:08 AM
  3. [1.0a2 Rev 5] MessageBox opens not modal (modal: true)
    By Arikon in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 27 Feb 2007, 9:52 PM
  4. Dialog modal
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 1 Dec 2006, 8:50 AM
  5. tabs and modal
    By jbowman in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 11 Oct 2006, 6:54 PM

Thread Participants: 1