0

嗨，我正在使用以下 jquery UI Lightbox 此代码在 IE 中不起作用，来自http://www.class.pm/files/jquery/jquery.ulightbox/demo/ 

<script type="text/javascript" src="js/jquery.ulightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ulightbox.css" /> 
 <script type="text/javascript">
 $(document).ready(function() {
 uLightBox.init({
  override:true,
  background: 'white',
  centerOnResize: true,
  fade: true
 });

 $('#alert').click(function() {
  alert('Hello');
  });
 });
 </script>

有没有办法在 IE 中解决这个问题？

4

1 回答 1

1

你是对的：“uLightBox”插件（或“ClassyLightbox”，因为它目前被命名）不适用于 Internet Explorer（至少在版本 8 和 9 中），因为它会引发 JavaScript 错误。
但是，我设法使它以这种方式工作：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/jquery.classylightbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script src="js/jquery.classylightbox.js"></script>
        <script type="text/javascript">
        function alert(val){ 
            ClassyLightbox.alert({ title: 'Alert', text: val, rightButtons: ['OK'] }); 
        }

        $(document).ready(function() {
            ClassyLightbox.init({
                override: false,
                background: 'white',
                centerOnResize: true,
                fade: true
            });

            $('#alert').click(function() {
                alert('Hello World');
            });
        });
        </script> 
    </head>
    <body>
         <input id="alert" type="button" value="Click Me" />
    </body>
</html>

在我的示例中，我使用了从此处下载的最新版本的插件。
然后我设置override为 false 并重新定义alert()函数来调用该ClassyLightbox.alert方法。
如果您使用的是旧版本的插件，您应该这样做：

<script type="text/javascript">
function alert(val){ 
    uLightBox.alert({ title: 'Alert', text: val, rightButtons: ['OK'] }); 
}

$(document).ready(function() {
    uLightBox.init({
        override: false,
        background: 'white',
        centerOnResize: true,
        fade: true
    });

    $('#alert').click(function() {
        alert('Hello World');
    });
});
</script>

此解决方案的缺点是您无法再更改背景颜色；换句话说，当override设置为 false 时，该background属性将被忽略。

于 2013-01-10T10:40:56.007 回答