Question

我试图找到一种在灯箱或彩盒中打开div的方法。我在网上尝试了一些指南，但无法弄明白。这是我的代码，我希望div #spotDetail打开。任何指针从哪里开始？

          <div id="spotsContainer"></div>

<div id="spotDetail" style="display:hidden;">
<ul id="images"></ul>
<div id="spotname"></div>
<div id="spotdistance"></div>
<div id="map"></div>    
</div>

<script>
var spots;



var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","https://code.jquery.com/jquery-git1.min.js");
if (script_tag.readyState) {
  script_tag.onreadystatechange = function () { // For old versions of IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
      }
  };
} else {
  script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main(); 
}

 function main() { 
jQuery(document).ready(function($) { 

    $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function(data) {

var str = "";
spots = data.Model;
$.each(data.Model, function (i, item) {
            str += "<div class='item' onclick=\"openObject('"+i+"');\" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></div>";
    });
    $("#spotsContainer").append(str);
//console.log(data);    

    });
});
}


function openObject(index){ 
jQuery(document).ready(function($) {

    var detail = spots[index];

 $("#images").empty();
    $("#spotname").text(detail.Name);
    $("#spotdistance").text(detail.Distance+"km frÂn Bunkerberget.");
        $.each(detail.Images, function (i, item) {
            $("#images").append("<li><img src=\"http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke\" alt=\"\" /></li>");
        });

$("#spotDetail").show();
});
}

</script>

Answer 1

请使用以下链接以参考colorbox

http://www.jacklmoore.com/colorbox/example1/#inline_content

在这里你会发现不同的 - 2方法打开弹出窗口。如果你想打开一个div的弹出，请使用

内联HTML - 示例

$(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".inline").colorbox({inline:true, width:"50%"});

            });

Demo

Answer 2

我认为首先你必须在表格中附加你的彩盒 - 使用这个

$(window).load(function () {
                $("#colorbox, #cboxOverlay").appendTo('form:first');
            });

然后调用colorbox

$(".test").colorbox({ iframe: true, width: "xyz", height: "xyz" });

Answer 3

您好我已经创建了一个HTML页面并粘贴了您的代码，之后我做了一些更新，现在它正在运行，请参阅下面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    Skatespots
    <div id="spotsContainer"></div>
    <div id="test" style="display:none;">
        <div id="spotDetail" style="display:hidden;">
            <ul id="images"></ul>
            <div id="spotname"></div>
            <div id="spotdistance"></div>
            <div id="map"></div>
        </div>
    </div>
    <script type="text/javascript">
        var spots;



        var jQuery;

        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "https://code.jquery.com/jquery-git1.min.js");
            if (script_tag.readyState) {
                script_tag.onreadystatechange = function () { // For old versions of IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        scriptLoadHandler();
                    }
                };
            } else {
                script_tag.onload = scriptLoadHandler;
            }
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
        } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
            main();
        }

        /******** Called once jQuery has loaded ******/
        function scriptLoadHandler() {
            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            jQuery = window.jQuery.noConflict(true);
            // Call our main function
            main();
        }

        function main() {
            jQuery(document).ready(function ($) {

                $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function (data) {

                    var str = "";
                    spots = data.Model;
                    $.each(data.Model, function (i, item) {
                        str += "<a href='#spotDetail' class='inline item' onclick=\"openObject('" + i + "');\" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></a>";
                    });
                    $("#spotsContainer").append(str);
                    //console.log(data);

                });
            });
        }


        function openObject(index) {
            jQuery(document).ready(function ($) {

                var detail = spots[index];

                $("#images").empty();
                $("#spotname").text(detail.Name);
                $("#spotdistance").text(detail.Distance + "km frÂn Bunkerberget.");
                $.each(detail.Images, function (i, item) {
                    $("#images").append("<li><img src=\"http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=100&height=100&bgcolor=white\" alt=\"\" /></li>");
                });

                $(".inline").colorbox({ inline: true, width: "50%" });
            });
        }
    </script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
</body>

</html>

你只做一件事请创建HTML页面，只需复制并粘贴这个给定的HTML，因为它在我们的页面中，你的功能将起作用

如何在彩盒/灯箱中打开div？

3 个答案: