0

こんにちは、次の jquery UI ライトボックスを使用しています。このコードは、 http: //www.class.pm/files/jquery/jquery.ulightbox/demo/ から参照されている IE では機能しません。 

<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」) は、JavaScript エラーをスローするため、Internet Explorer (少なくともバージョン 8 および 9) では機能しません。
ただし、次の方法で機能させることができました。

<!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 に答える