Home/ Questions/Q 9151587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:50:23+00:00

Hi i’m using the following jquery UI Lightbox this code is not working in

  • 0

Hi i’m using the following jquery UI Lightbox this code is not working in IE
refered from 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>

is there any option to work out this in IE?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re right: the “uLightBox” plugin (or “ClassyLightbox”, as it’s currently named) doesn’t work with Internet Explorer (at least with versions 8 and 9), since it throws a JavaScript error.
    However, I’ve managed to make it work this way:

    <!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>

    In my example I’ve used the latest version of the plugin, downloaded from here.
    Then I’ve set override to false and redefined the alert() function to invoke the ClassyLightbox.alert method.
    If you’re using an older version of the plugin, you should do it this way:

    <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>

    The drawback of this solution is that you can no longer change the background color; in other words when override is set to false, the background property is ignored.

    • 0