jquery UI Lightbox无法在IE中运行

时间:2012-09-03 10:17:01

标签: jquery jquery-ui jquery-plugins lightbox

您好我正在使用以下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中解决这个问题?

1 个答案:

答案 0 :(得分: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>

在我的示例中,我使用了从here下载的最新版插件 然后我将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属性。