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