Javascript 如何向jquery Lightbox添加关闭按钮？_Javascript_Html_Css_Lightbox

Javascript 如何向jquery Lightbox添加关闭按钮？

javascript html css

Javascript 如何向jquery Lightbox添加关闭按钮？,javascript,html,css,lightbox,Javascript,Html,Css,Lightbox,我最近做了一个灯箱，我想添加一个关闭按钮。以下是我所拥有的： <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-c

我最近做了一个灯箱，我想添加一个关闭按钮。以下是我所拥有的：

    <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>

.黑色覆盖层{ 显示：无；位置：绝对位置；最高：0%；左：0%；宽度：100%；身高：100%；背景色：黑色； z指数：1001； -moz不透明度：0.8；不透明度：.80；过滤器：α（不透明度=80）； } .white_内容{ 宽度：600px；高度：560px；填充：16px；最高：5%；左：25%；位置：绝对位置；显示：无； -webkit边界半径：20px； -moz边界半径：20px；边界半径：20px；边框：2个实心#FFFFFF；背景色：#FFFFFF； -网络工具包盒阴影：#C9C9C9 8px 8px 8px； -moz盒阴影：#C9C9C9 8px 8px 8px；盒影：#C9C9C9 8px 8px 8px； z指数：1002；溢出：自动；

如何在弹出窗口的上角添加关闭按钮？

添加类

关闭on
满足于此

在类.white\u内容上
删除溢出：自动；

我已经完成了，您可以在上看到，如何向jquery lightbox添加关闭按钮：
例如，将其放入名为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>


#我的灯箱{
显示：无；
宽度：500px；
高度：170px；
文本对齐：居中；
边框：1px纯蓝色；
垂直对齐：中间对齐；
背景：#eef2f7；
-webkit边界半径：15px；
填充：14px 22px；
-moz边界半径：6px；
保证金：0；
文字装饰：无；
列表样式：无；
大纲：无；
颜色：#536376；
}
var dispatchpopup=function（）{
$（“#我的灯箱”）。我的灯箱({
对,，
onLoad:function（）{
$（'my#u lightbox_text'）.html（“Stuff”）；
}
});
}
接近我

在test.html的同一目录中，您需要包含文件jquery-1.10.2.min.js
和jquery.lightbox\u me.js
，可在此处找到：


单击链接时发生的情况的屏幕截图。

当你点击弹出窗口中的关闭按钮时，弹出窗口关闭。你可以将关闭事件挂接到任何东西上
<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>