Question

我正在制作灯箱，我尝试制作位置，但如果我添加div id则无效。我添加了jquery和javascript 我想给位置如何制作？

  <div id="photos">
    <style type="text/css">
      #photos {
        position: absolute;
      }

      #photos ul li {
        padding-left: 20px;
        padding-top: 80px;
      }
    </style>

    <ul>
      <li>
        <a href="img/example.png" data-lightbox="example.png" data-title="photos title"><img src="img/example.png" width="100" height="110" /></a>
      </li>
    </ul>

    </ul>
  </div>

Answer 1

在CSS中定位元素我们有：

#photos{                    // Select element Which have the ID of photos
    position: absolute;
    left: 120px;            // Move this element to left up to 120 PX;
    top: 120px;             // From top Move this element up to 120 PX;
}

仅供参考：<style>代码保存在您网页的head内，而不是在元素本身之后。

祝你好运：）

Answer 2

灯箱只是一个常规的DIV结构，其样式为position:absolute或position:fixed，可将其从普通HTML流中删除。然后隐藏它，并在按钮点击或其他可检测事件（mouseover，ajax.done等）时显示。

由于灯箱只是一个普通的div，您可以使用$('#divID').html('<tag>Your HTML here</tag>')或.append()或.text()将新内容添加到灯箱/ div 中等

首先让您的项目使用＆＃34;灯箱＆＃34;这是未隐藏的，然后将display:none添加到灯箱HTML的顶级容器的CSS中。我的示例代码中的<div id="lightbox"> 并使用.show() / .hide()等命令在需要时显示灯箱。

＆＃13;

$('#btnClickMe').click(function(){
  $('#photos').fadeIn();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style type="text/css">
  #photos {position: absolute;display:none;}
  #photos ul li {padding-left: 20px;padding-top: 80px;}
</style>

<div id="photos">
  <ul>
    <li>
      <a href="#" data-lightbox="example.png" data-title="photos title"><img src="http://placeimg.com/100/110/animals" width="100" height="110" /></a>
    </li>
  </ul>
</div>
<button id="btnClickMe">Click Me</button>

＆＃13;

以下是自动投影灯箱的另一个例子：

＆＃13;

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('This is a lightbox').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});
  
}); //END document.ready

＆＃13;

/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}

＆＃13;

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

＆＃13;

如何为灯箱提供位置

2 个答案: