个人中心
gpt4 book ai didi

jquery - $.colorbox.close();彩盒关闭问题

转载 作者：行者123 更新时间：2023-12-01 00:36:21 24 4
gpt4 key购买 nike

我尝试在单击按钮时关闭颜色框窗口。该窗口应该是 ajax 分页窗口。

我尝试过示例页面，内联按钮可以关闭，与我在ajax分页中编写的代码相同，但它在控制台firebug ie中抛出错误

**"TypeError: $.colorbox is undefined


(9 out of range 6)"**

我真的不知道这个错误的含义。

我的 HTML 代码是 .index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body {
    font:12px/1.2 Verdana, sans-serif;
    padding:0 10px;
}
a:link, a:visited {
    text-decoration:none;
    color:#416CE5;
    border-bottom:1px solid #416CE5;
}
h2 {
    font-size:13px;
    margin:15px 0 0 0;
}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $(".ajax").colorbox();
                $(".inline").colorbox({inline:true, width:"50%"});

                $('#test_close').click('cbox_closed',function(e){
                     $('#test_close').colorbox.close();
                }); 

            });
        </script>
</head>
<body>
<p><a class='ajax' href="http://localhost/karthiga/demo/colorbox-master/content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
  <div id='inline_content' style='padding:10px; background:#fff;'>
    <p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem </p>
    <br/>
    <br/>
    <p><a href="javascript:void(0);" id="test_close">Close</a></p>
  </div>
</div>
</body>
</html>

ajax页面是:ajax.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $('#test_close1').click('cbox_closed',function(e){
                alert('');
                     $.colorbox.close();
                }); 
            });
        </script>
</head>
<body>
<p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum </p>
<br/>
<br/>
<p><a href="javascript:void(0);" id="test_close1">Close</a></p>
</body>
</html>

我做错了什么？

最佳答案

我在我的工作站上加载了完整的示例，发现了两个问题。

  1. 当 Colorbox 使用 AJAX 加载页面时，它实际上内联了生成的 HTML。由于您的 ajax.html 文件正在加载 jQuery 并且Colorbox 小部件再次出现，它引起了问题。所以，删除两个 <script> ajax.html 文件中的标记。
  2. 在index.html中你调用$('#test_close').colorbox.close(); 。替换这个与 $.colorbox.close(); .

这些应该可以解决您的问题。祝你好运!

关于jquery - $.colorbox.close();彩盒关闭问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20399244/

24 4 0
文章推荐： MySQL 区间变量和子查询符号
文章推荐： python - dateutil 和闰年
文章推荐： javascript - 为什么这个 async/await 函数返回一个 promise ？
文章推荐： java - SQL语句不加单引号( ' ')
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com