Modal ExtJS Window not masking everything behind it in Safari and Chrome_问答_开发者

Modal ExtJS Window not masking everything behind it in Safari and Chrome

开发者 https://www.devze.com 2022-12-20 03:34 出处：网络

相关专题：extjs

I was wondering if somebody could help me with this problem. Everytime I show an Ext.Window with its modal config set to true, in FF and IE, it works fine, i mean everything behind the popup 开发者_C百科window is masked, whereas in Safari and Chrome, it doesn't. When i try to scroll down the page, I can see the mask is limited, which is not what i wanted to happen because one can easily do some stuff on the parent page even when the window is not yet closed. Can somebody help me? Thanx in advance. :D

I thought maybe this would happen if you were not running in a Viewport, so I put together a simple example. It turns out that the modal mask works just fine in Safari in this example. Give it a try and see where your code differs.

<html>
  <head>
    <link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
    <script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
    <script src="ext-3.1.1/ext-all-debug.js"></script>
    <script>
      Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
      Ext.onReady(function(){
        var p = new Ext.Panel({
          renderTo: 'panel',
          html: 'this is the panel',
          tbar: [{
            text: 'Show a Modal Window',
            handler: function() {
              new Ext.Window({
                title: 'Title',
                html: 'Try scrolling - the entire page should be modal',
                modal: true
              }).show();
            }
          }]
        });
      });
    </script>
  </head>
  <body>
    <h1 style="height:100px;background-color:green;">html page</h1>
    <div id="panel"></div>
    <h1 style="height:1200px;background-color:green;">html page</h1>
  </body>
</html>

It should work fine in Safari and Chrome out of the box. I just verified this page in Safari 4.0.4 Mac and it works fine with scrolling and/or resizing the browser. There's a chance maybe there's a bug in Ext for your particular browser/platform, but this is such a basic functionality that I doubt that. Does that page work for you?

This helped set the z-index for Ext.Msg.show() alerts to be infront of the window they were opened from for me.