Question

我是jquery和colorbox的新手。我想只在彩盒弹出窗口中显示“不，谢谢”。但是颜色框弹出窗口不显示文本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />

<a id="colorpop" href="#displaycontent">hi</a>
<div>
  <div class="cboxElement" id="displaycontent">

    <p> Hello</p>

    <div id="displaycancel">No thanks</div> 

  </div>
</div>

<script>
    $(function(){
    $("#displaycancel").css("display", "none");
      $("#colorpop").colorbox({inline:true, width:"50%"});
      if($("#displaycancel").parents("#cboxContent").length){
        alert("hello");
         $("#displaycancel").css("display", "block");   
      }
    });
</script>

提前致谢

Answer 1

好的，我找到了自己的答案：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />

    <a id="colorpop" href="#displaycontent">hi</a>
    <div>
      <div class="cboxElement" id="displaycontent">

        <p> Hello</p>

        <div style="display:none" id="displaycancel">No thanks</div> 

      </div>
    </div>



    <script>


    $(function(){

      $("#colorpop").colorbox({
        inline:true, 
        width:"50%",
        onOpen: function(){
          $("#displaycancel").css("display", "block");  
        },
        onCleanup: function(){
          $("#displaycancel").css("display", "none");


      }});
    });

    </script>

Answer 2

除非你想在弹出窗口之前显示它，否则隐藏整个displaycontent会更好。只需对代码进行最少的更改即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />

<a id="colorpop" href="#displaycontent">hi</a>
<div>
  <div class="cboxElement" style="display:none" id="displaycontent">

    <p> Hello</p>

    <div id="displaycancel">No thanks</div> 

  </div>
</div>



<script>


    $(function () {

        $("#colorpop").colorbox({
            inline: true,
            width: "50%",
            onOpen: function () {
                $("#displaycontent").css("display", "block");
            },
            onCleanup: function () {
                $("#displaycontent").css("display", "none");


            }
        });
    });

</script>

Jquery：仅在colorbox弹出窗口中显示内容

2 个答案: