如何將關閉按鈕添加到jQuery Lightbox？

Question

我最近制作了一個燈箱，想為其添加一個關閉按鈕。 這是我所擁有的：

    <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }


        .white_content {
        width:600px;
        height:560px;
        padding: 16px;
         top: 5%;
         left: 25%;
         position: absolute;
         display: none;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border:2px solid #FFFFFF;
        background-color:#FFFFFF;
        -webkit-box-shadow: #C9C9C9 8px 8px 8px;
        -moz-box-shadow: #C9C9C9 8px 8px 8px;
        box-shadow: #C9C9C9 8px 8px 8px;
        z-index:1002;
        overflow: auto;

    </style>
    </head>
    <body>
        <p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here.................................................................................................</a></p>
        <div id="light" class="white_content"><center><img src="http://theamazingmonth.pusku.com/files/Help.png">
<br>
<!--- Text for Help.</--->
<p align="left">
<div class="tilt pic">
    <img src="http://theamazingmonth.pusku.com/clues/Envelope.png" height="114" width="193" alt="">
  </div>

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">x</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

如何在彈出窗口的頂部添加關閉按鈕？

Answer 1

在<a>標簽上添加類close ，然后在<div>標簽中添加內容。

<div id="light" class="white_content">
    <div class="white-header>"
        <a class="close" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">x</a>
    </div>

    <div class="white-body">
    content here
    </div>
</div>

在類.white_content刪除overflow: auto;

我已經做到了，你可以在jsfiddle上看到，編輯jsfiddle

Answer 2

如何向jquery燈箱添加關閉按鈕：

實時示例，將其放在一個名為test.html的文件中：

<html>
    <head>        
        <script src="jquery-1.10.2.min.js"></script>
        <script src="jquery.lightbox_me.js"></script>
    </head>
<body>

<style>
  #my_lightbox{
    display: none;
    width: 500px;
    height: 170px;
    text-align: center;
    border: 1px solid blue;
    vertical-align: middle;
    background: #eef2f7;
    -webkit-border-radius: 15px;
    padding: 14px 22px;
    -moz-border-radius: 6px;
    margin: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    color: #536376;
  }
</style>

<script>
  var dispatchpopup = function(){  
    $('#my_lightbox').lightbox_me({
      centered: true,
      onLoad: function() {
        $('#my_lightbox_text').html("Stuff");
      }
    });
  }
</script>

<a href="#" onClick="dispatchpopup();">Clicky</a>

<div id="my_lightbox">
  <div id="my_lightbox_text"></div>
  <button id="penguin" onClick="$('#my_lightbox').trigger('close');">CloseME</button>
</div>

</body>
</html>

在與test.html相同的目錄中，您需要包括文件jquery-1.10.2.min.js和jquery.lightbox_me.js ，可在此處找到：

http://jquery.com/download/

http://buckwilson.me/lightboxme/

單擊鏈接時發生的情況的屏幕截圖。

在此處輸入圖片說明

當您單擊彈出窗口中的關閉按鈕時，彈出窗口將關閉。 您可以將關閉事件掛接到任何東西上。

如何將關閉按鈕添加到jQuery Lightbox？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-05-18 19:12:32

解決方案2
0 2014-02-12 23:31:00

如何向jquery燈箱添加關閉按鈕：

如何將關閉按鈕添加到jQuery Lightbox？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-05-18 19:12:32

解決方案2 0 2014-02-12 23:31:00

如何向jquery燈箱添加關閉按鈕：

解決方案1
1 已采納 2013-05-18 19:12:32

解決方案2
0 2014-02-12 23:31:00