Javascript显示隐藏div覆盖与点击关闭按钮

-1

我在一个小的帮助后 - 我不是一个伟大的程序员，并且通常可以通过Google搜索找到我的问题的答案，但这次不是！Javascript显示隐藏div覆盖与点击关闭按钮

我想在网页上产生一个特定的效果，我正在努力寻找一些基本的JS我可以修改/调整做我需要的东西。

我打算在一个网页上放置一个由10个图像组成的图像，分成两排，每排五个。每张图片上方都会有一个“名称”，下面有一个“职位”。点击图片后，我想让（相关）隐藏div显示在所有图片的顶部 - 即左上角与第一张图片的左上角相匹配。 div将是一个预设的宽度。

在每个div的上角我想要一个简单的关闭按钮。

所以，我试图产生的是可扩展的代码 - 即理论上它应该没有关系，只要我得到结构的权利，当你点击图像时，它'显示'正确的隐藏div。

我们已经加载到网页上的jQuery，所以使用这将是没有问题的。

任何意见/链接片段/指针，将不胜感激！

来源

2014-05-06 James Davies

因此，你想要显示一个单击图像时，所有图像的div。那些div中的内容呢？他们都是一样的..？什么是你现在有这些图像的HTML结构和CSS ..？ –

@TJ结构可以修改，以适应 - 什么，我着的正视沿着其中显示图像的

Content

行的东西，和隐藏的div保持隐藏，直到图像被点击。隐藏的div将包含每个关闭按钮。 –

除了@Gino Pane的回答，请看看http://jqueryui.com/dialog/ –

这是很简单的jQuery和jQueryUI的实现。

为了简便起见，我只这里包括5张图片http://jsfiddle.net/8kefF/2/

HTML：

<div> 
    <div class="clickThisPicture" data-content-id="1"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="2"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="3"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="4"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
    <div class="clickThisPicture" data-content-id="5"> 
     <img src="http://placehold.it/350x150" /> 
    </div> 
</div> 
<div class="hiddenContent" data-content-id="1">Hidden content 1</div> 
<div class="hiddenContent" data-content-id="2">Hidden content 2</div> 
<div class="hiddenContent" data-content-id="3">Hidden content 3</div> 
<div class="hiddenContent" data-content-id="4">Hidden content 4</div> 
<div class="hiddenContent" data-content-id="5">Hidden content 5</div>

CSS：

.hiddenContent { 
    display:none; 
} 
.clickThisPicture { 
    float:left; 
    border:1px solid #000; 
}

的Javascript：

$(document).ready(function() { 
    $('.clickThisPicture').on('click', function (event) { 
     var contentId = $(this).data('content-id'); 
     $(".hiddenContent[data-content-id='" + contentId + "']").dialog({ 
      modal: true, 
      resizable: false, 
      draggable: false, 
      closeOnEscape: false, 
      dialogClass: "no-close", 
      buttons: { 
       "Close": function() { 
        $(this).dialog("destroy"); 
       } 
      } 
     }); 
    }); 
});

编辑：我更新隐藏缺省值close按钮的代码，以便在OP要求可伸缩性时每次销毁该元素，因此DOM中可能有100个/ 1000个额外元素会导致内存问题。最终。

来源

2014-05-06 11:53:30

这是完美的，谢谢@RobSchmuecker，我会拿那个小提琴并用我自己的格式来调整它。 –

我已经开始玩这个了，并且已经在这个测试页面上实现了它： http://www.stormforce.biz/test-pages/test-interns.html 我现在遇到的问题是造型的对话框，并定位它，使其从我的第一个图像的左上角开始（即我希望它覆盖所有的图像）。我假设这是设置在JavaScript的某处 - 我已经调用了jQuery和jQuery UI。我该如何改变盒子的外观和感觉？ –

嗨，詹姆斯，看看你传递给对话的“选项”的'position'参数。 http://api.jqueryui.com/dialog/#option-position 它需要一个坐标对，所以你必须确保你得到你的第一个图像的左上角坐标，如$（'。clickThisPicture ：first'）。position（）;'或类似的。 –

如果我理解正确，这个jQuery插件将帮助您：plainOverlay

来源

2014-05-06 11:20:06

Javascript显示隐藏div覆盖与点击关闭按钮

回答

相关问题