Loading ...
Sorry, an error occurred while loading the content.

Modal panel not covering rest of page

Expand Messages
  • jessevitrone
    I have a page that I m trying to add a model dialog to, and it doesn t seem to be covering all the content behind it. My panel code looks like this: var
    Message 1 of 10 , Sep 25, 2006
    • 0 Attachment
      I have a page that I'm trying to add a model dialog to, and it doesn't seem to be covering all the content "behind" it.

      My panel code looks like this:

          var loginOrRegisterDialog;
          function showLoginRegisterDialog() {
         
              if (loginOrRegisterDialog == undefined) {
                  loginOrRegisterDialog = new YAHOO.widget.Panel("loginOrRegisterDialog", {
                       fixedcenter:         true,
                       constraintoviewport: true,
                       underlay:            "shadow",
                       close:               true,
                       visible:             true,
                      modal:               true,
                       draggable:           false
                  });
                 
                  loginOrRegisterDialog.setHeader("Login or Register");
                  loginOrRegisterDialog.render(document.body);
              } else {
                  loginOrRegisterDialog.show();
              }
             
          }

      This works fine in my test case (click the "show" link):
      http://whatshouldisay.com/test/yahoo/dialog.html 

      But doesn't seem to work right in my real page (click the blue +question link on the right 1/2 way down the page):
      http://whatshouldisay.com/topic/index.php?topicId=1244 

      Any idea what I have in my real page that's screwing up the modal cover?

      Thanks in advance.
    • Chris Blessing
      Seems like a z-index problem. Using FF with the web dev toolbar, I edited the CSS to change: .mask { z-index:0; to: .mask { z-index:1; That effectively covers
      Message 2 of 10 , Sep 25, 2006
      • 0 Attachment
        Seems like a z-index problem.  Using FF with the web dev toolbar, I edited the CSS to change:
         
        .mask {
            z-index:0;  
         
        to:
         
        .mask {
            z-index:1;  
         
        That effectively covers everything on your page.  I'd test it in IE but your code doesn't seem to be IE-compliant. :)
         
        You may also specify the z-index in your config object as such:
         
        {
           fixedcenter: true,
           constraintoviewport: true,
           underlay: "shadow",
           close: true,
           visible: true,
           modal: true,
           draggable: false,
           zIndex: 1
        }
         
        I didn't, however, look too deeply into your code so you may have other CSS/JS conflicts which may inhibit the zIndex arg from taking effect.
         
        -Chris
        f.e. engineer, Yahoo! Membership
         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of jessevitrone
        Sent: Monday, September 25, 2006 11:15 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Modal panel not covering rest of page

        I have a page that I'm trying to add a model dialog to, and it doesn't seem to be covering all the content "behind" it.

        My panel code looks like this:

            var loginOrRegisterDial og;
            function showLoginRegisterDi alog() {
           
                if (loginOrRegisterDia log == undefined) {
                    loginOrRegisterDial og = new YAHOO.widget. Panel("loginOrRe gisterDialog" , {
                         fixedcenter:         true,
                         constraintoviewport : true,
                         underlay:   &! nbsp;        "shadow",
                         close:               true,
                         visible:             true,
                        modal:               true,
                         draggable:           false
                    });
                   
               &! nbsp;    loginOrRegisterDial og.setHeader( "Log in or Register");
                    loginOrRegisterDial og.render( document. body);
                } else {
                    loginOrRegisterDial og.show() ;
                }
               
            }

        This works fine in my test case (click the "show" link):
        http://whatshouldis ay.com/test/ yahoo/dialog. html 

        But doesn't seem to work right in my real page (click the blue +question link on the right 1/2 way down the page):
        http://whatshouldis ay.com/topic/ index.php? topicId=1244 

        Any idea what I have in my real page that's screwing up the modal cover?
        !
        Thanks in advance.

      • jessevitrone
        Thanks for the tip and quick reply. Changing the mask worked, but setting zIndex in the config object didn t help. I had seen that in the example, but couldn t
        Message 3 of 10 , Sep 25, 2006
        • 0 Attachment
          Thanks for the tip and quick reply. 

          Changing the mask worked, but setting zIndex in the config object didn't help. I had seen that in the example, but couldn't get it to work.   I get no errors when the page loads, nor when I click and the dialog shows (in FF), but unless I change the mask, I have no luck.

          I updated my page if you want to see it work, then break it.  You can see here it's working now - http://whatshouldisay.com/topic/index.php?topicId=1244 .  You can see in http://whatshouldisay.com/js/wsis.js  that I'm setting the zIndex in the config.  If you edit the CSS in Firefox, and remove the .mask at the bottom of main.css, then try again, it's broken.  Is this a bug in the config code?

          Yes, I know, it's not IE compliant yet, I make it work in FF, then hack it for IE ;)

          Thanks again,
              Jesse

          --- In ydn-javascript@yahoogroups.com, "Chris Blessing" <blessing@...> wrote:
          >
          > Seems like a z-index problem. Using FF with the web dev toolbar, I edited
          > the CSS to change:
          >
          > .mask {
          > z-index:0;
          >
          > to:
          >
          > .mask {
          > z-index:1;
          >
          > That effectively covers everything on your page. I'd test it in IE but your
          > code doesn't seem to be IE-compliant. :)
          >
          > You may also specify the z-index in your config object as such:
          >
          > {
          > fixedcenter: true,
          > constraintoviewport: true,
          > underlay: "shadow",
          > close: true,
          > visible: true,
          > modal: true,
          > draggable: false,
          > zIndex: 1
          > }
          >
          > I didn't, however, look too deeply into your code so you may have other
          > CSS/JS conflicts which may inhibit the zIndex arg from taking effect.
          >
          > -Chris
          > f.e. engineer, Yahoo! Membership
          >
          > _____
          >
          > From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com]
          > On Behalf Of jessevitrone
          > Sent: Monday, September 25, 2006 11:15 AM
          > To: ydn-javascript@yahoogroups.com
          > Subject: [ydn-javascript] Modal panel not covering rest of page
          >
          >
          >
          > I have a page that I'm trying to add a model dialog to, and it doesn't seem
          > to be covering all the content "behind" it.
          >
          > My panel code looks like this:
          >
          > var loginOrRegisterDialog;
          > function showLoginRegisterDialog() {
          >
          > if (loginOrRegisterDialog == undefined) {
          > loginOrRegisterDialog = new
          > YAHOO.widget.Panel("loginOrRegisterDialog", {
          > fixedcenter: true,
          > constraintoviewport: true,
          > underlay: &! nbsp; "shadow",
          > close: true,
          > visible: true,
          > modal: true,
          > draggable: false
          > });
          >
          > &! nbsp; loginOrRegisterDialog.setHeader("Log in or Register");
          > loginOrRegisterDialog.render(document.body);
          > } else {
          > loginOrRegisterDialog.show();
          > }
          >
          > }
          >
          > This works fine in my test case (click the "show" link):
          > http://whatshouldis <http://whatshouldisay.com/test/yahoo/dialog.html>
          > ay.com/test/yahoo/dialog.html
          >
          > But doesn't seem to work right in my real page (click the blue +question
          > link on the right 1/2 way down the page):
          > http://whatshouldis <http://whatshouldisay.com/topic/index.php?topicId=1244>
          > ay.com/topic/index.php?topicId=1244
          >
          > Any idea what I have in my real page that's screwing up the modal cover?
          > !
          > Thanks in advance.
          >
        • cmollerman
          That isn t a bug. The .mask class _IS_ the gray-ish background that covers the stuff in the background. It s supposed to be there in order for the modal
          Message 4 of 10 , Sep 26, 2006
          • 0 Attachment
            That isn't a bug. The .mask class _IS_ the gray-ish background that
            "covers" the stuff in the background. It's supposed to be there in
            order for the modal dialog to work as written.

            > the config. If you edit the CSS in Firefox, and remove the .mask at
            >the bottom of main.css, then try again, it's broken. Is this a bug
            >in the config code?
          • jessevitrone
            The .mask class is included in the container.css, but if I don t change it to have a higher z-index, it shows up, but doesn t cover my background stuff. That
            Message 5 of 10 , Sep 27, 2006
            • 0 Attachment
              The .mask class is included in the container.css, but if I don't
              change it to have a higher z-index, it shows up, but doesn't cover my
              background stuff. That makes sense and works fine, I change the .mask
              css, and it covers my background.

              The issue I was questioning was that instead of changing the css, I
              should be able to use the default css, and specify a zIndex in the
              panel config. That's what doesn't seem to be working correctly.

              fixes my problem:
              .mask { z-index: 1 }

              doesn't fix my problem:
              // in the panel config
              zIndex:1

              I'm under the impression that these 2 should do the same thing, but
              one fixes my problem and the other doesn't.

              - Jesse

              --- In ydn-javascript@yahoogroups.com, "cmollerman" <cmollerman@...>
              wrote:
              >
              >
              > That isn't a bug. The .mask class _IS_ the gray-ish background that
              > "covers" the stuff in the background. It's supposed to be there in
              > order for the modal dialog to work as written.
              >
              > > the config. If you edit the CSS in Firefox, and remove the .mask at
              > >the bottom of main.css, then try again, it's broken. Is this a bug
              > >in the config code?
              >
            • Chris Blessing
              Jesse- I think the zIndex config param (now that I think about it a bit more) only affects the panel itself, it may not cascade down to the mask layer if you
              Message 6 of 10 , Sep 27, 2006
              • 0 Attachment
                Jesse-
                 
                I think the zIndex config param (now that I think about it a bit more) only affects the panel itself, it may not cascade down to the mask "layer" if you will.
                 
                This is a good question for someone who has more internal experience with the Container widget so I'll have to defer to them. :)
                 
                -Chris
                f.e. engineer, Yahoo! Membership


                From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of jessevitrone
                Sent: Wednesday, September 27, 2006 8:13 AM
                To: ydn-javascript@yahoogroups.com
                Subject: [ydn-javascript] Re: Modal panel not covering rest of page

                The .mask class is included in the container.css, but if I don't
                change it to have a higher z-index, it shows up, but doesn't cover my
                background stuff. That makes sense and works fine, I change the .mask
                css, and it covers my background.

                The issue I was questioning was that instead of changing the css, I
                should be able to use the default css, and specify a zIndex in the
                panel config. That's what doesn't seem to be working correctly.

                fixes my problem:
                .mask { z-index: 1 }

                doesn't fix my problem:
                // in the panel config
                zIndex:1

                I'm under the impression that these 2 should do the same thing, but
                one fixes my problem and the other doesn't.

                - Jesse

                --- In ydn-javascript@ yahoogroups. com, "cmollerman" <cmollerman@ ...>
                wrote:

                >
                >
                > That
                isn't a bug. The .mask class _IS_ the gray-ish background that
                > "covers"
                the stuff in the background. It's supposed to be there in
                > order for the
                modal dialog to work as written.
                >
                > > the config. If you edit
                the CSS in Firefox, and remove the .mask at
                > >the bottom of main.css,
                then try again, it's broken. Is this a bug
                > >in the config
                code?
                >

              • jessevitrone
                That makes sense. Thanks for the help. - Jesse ... more) only ... layer if you ... with ... [mailto:ydn-javascript@yahoogroups.com]
                Message 7 of 10 , Sep 27, 2006
                • 0 Attachment
                  That makes sense. Thanks for the help.

                  - Jesse

                  --- In ydn-javascript@yahoogroups.com, "Chris Blessing" <blessing@...>
                  wrote:
                  >
                  > Jesse-
                  >
                  > I think the zIndex config param (now that I think about it a bit
                  more) only
                  > affects the panel itself, it may not cascade down to the mask
                  "layer" if you
                  > will.
                  >
                  > This is a good question for someone who has more internal experience
                  with
                  > the Container widget so I'll have to defer to them. :)
                  >
                  > -Chris
                  > f.e. engineer, Yahoo! Membership
                  >
                  > _____
                  >
                  > From: ydn-javascript@yahoogroups.com
                  [mailto:ydn-javascript@yahoogroups.com]
                  > On Behalf Of jessevitrone
                  > Sent: Wednesday, September 27, 2006 8:13 AM
                  > To: ydn-javascript@yahoogroups.com
                  > Subject: [ydn-javascript] Re: Modal panel not covering rest of page
                  >
                  >
                  >
                  > The .mask class is included in the container.css, but if I don't
                  > change it to have a higher z-index, it shows up, but doesn't cover my
                  > background stuff. That makes sense and works fine, I change the .mask
                  > css, and it covers my background.
                  >
                  > The issue I was questioning was that instead of changing the css, I
                  > should be able to use the default css, and specify a zIndex in the
                  > panel config. That's what doesn't seem to be working correctly.
                  >
                  > fixes my problem:
                  > .mask { z-index: 1 }
                  >
                  > doesn't fix my problem:
                  > // in the panel config
                  > zIndex:1
                  >
                  > I'm under the impression that these 2 should do the same thing, but
                  > one fixes my problem and the other doesn't.
                  >
                  > - Jesse
                  >
                  > --- In ydn-javascript@ <mailto:ydn-javascript%40yahoogroups.com>
                  > yahoogroups.com, "cmollerman" <cmollerman@>
                  > wrote:
                  > >
                  > >
                  > > That isn't a bug. The .mask class _IS_ the gray-ish background that
                  > > "covers" the stuff in the background. It's supposed to be there in
                  > > order for the modal dialog to work as written.
                  > >
                  > > > the config. If you edit the CSS in Firefox, and remove the .mask at
                  > > >the bottom of main.css, then try again, it's broken. Is this a bug
                  > > >in the config code?
                  > >
                  >
                • tistitch
                  hello, i just have the same problem as you...but i ve already set the z-index to 1 before... and it don t cover all the width of my page. i tried in the object
                  Message 8 of 10 , Oct 3, 2006
                  • 0 Attachment
                    hello, i just have the same problem as you...but i've already set the
                    z-index to 1 before...
                    and it don't cover all the width of my page.
                    i tried in the object but still does not cover all my page...
                    i tried to put in the .mask width and height to 100% but still not
                    working.

                    my .mask is :
                    .mask {
                    z-index:1;
                    display:none;
                    position:absolute;
                    top:0;
                    left:0;
                    -moz-opacity: 0.5;
                    opacity:.50;
                    filter: alpha(opacity=50);
                    background-color:#CCC;
                    }

                    anyone could help me please?
                  • Kris Schneider
                    I just solved some of my own FF layering issues like so: .mask { z-index: 100; } var panelConfig = { zIndex: 200 }; Not sure if it ll help in your situation,
                    Message 9 of 10 , Oct 3, 2006
                    • 0 Attachment
                      I just solved some of my own FF layering issues like so:

                      .mask {
                      z-index: 100;
                      }

                      var panelConfig = { zIndex: 200 };

                      Not sure if it'll help in your situation, but it can't hurt trying...

                      --
                      Kris Schneider <mailto:kschneider@...>
                    • tistitch
                      thank you but it still does not work my object code : var id_en_cours; YAHOO.namespace( example.simpledialog ); function init()
                      Message 10 of 10 , Oct 4, 2006
                      • 0 Attachment
                        thank you but it still does not work

                        my object code :
                        <script language="javascript">
                        var id_en_cours;

                        YAHOO.namespace("example.simpledialog");

                        function init() {
                        var handleCancel = function(e) {
                        this.hide();
                        }

                        var handleOK = function(e) {

                        document.location.href='action/action_facture.php?cancel&id='+id_en_cours;
                        this.hide();
                        }

                        YAHOO.example.simpledialog.dlg = new
                        YAHOO.widget.SimpleDialog("dlg", { visible:false, width: "270px",
                        effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}],
                        fixedcenter:true, modal:true, draggable:false});

                        YAHOO.example.simpledialog.dlg.setHeader("Attention!");
                        YAHOO.example.simpledialog.dlg.setBody("Voulez-vous annuler ce devis");

                        YAHOO.example.simpledialog.dlg.cfg.queueProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
                        YAHOO.example.simpledialog.dlg.cfg.queueProperty
                        ("buttons", [ { text:"OK", handler:handleOK, isDefault:true },
                        { text:"Annuler", handler:handleCancel } ]);

                        YAHOO.example.simpledialog.dlg.render(document.body);
                        }

                        YAHOO.util.Event.addListener(window, "load", init);
                        </script>



                        --- In ydn-javascript@yahoogroups.com, "Kris Schneider"
                        <kschneider@...> wrote:
                        >
                        > I just solved some of my own FF layering issues like so:
                        >
                        > .mask {
                        > z-index: 100;
                        > }
                        >
                        > var panelConfig = { zIndex: 200 };
                        >
                        > Not sure if it'll help in your situation, but it can't hurt trying...
                        >
                        > --
                        > Kris Schneider <mailto:kschneider@...>
                        >
                      Your message has been successfully submitted and would be delivered to recipients shortly.