Javascript以显示隐藏的div覆盖与点击关闭按钮 [英] Javascript to show hidden div overlay with close button on clicks

问题描述

我有一点帮助 - 我不是一个优秀的程序员，通常可以通过Google搜索找到我的问题的答案，但这次不行！我试图在网页上产生特定的效果，并且正在努力寻找一些基本的JS，我可以修改/调整以做我所需要的。

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

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

$ b $因此，我试图产生的是可扩展的代码 - 即理论上说，只要我获得了正确的结构，那么应该有多少图像无关紧要，当你点击图像时，它'显示'正确的隐藏div。

我们已经将jQuery加载到网页上，因此使用它不会造成任何问题。

任何建议/链接到片段/指针将不胜感激！

解决方案

使用jQuery和jQueryUI可以非常简单地实现这一点。 / p>

为简洁起见，我只在这里包含5张图片 http：/ /jsfiddle.net/8kefF/2/

HTML：

 < DIV> 
< div class =clickThisPicturedata-content-id =1> 
< img src =http://placehold.it/350x150/> 
< / div> 
< div class =clickThisPicturedata-content-id =2> 
< img src =http://placehold.it/350x150/> 
< / div> 
< div class =clickThisPicturedata-content-id =3> 
< img src =http://placehold.it/350x150/> 
< / div> 
< div class =clickThisPicturedata-content-id =4> 
< img src =http://placehold.it/350x150/> 
< / div> 
< div class =clickThisPicturedata-content-id =5> 
< img src =http://placehold.it/350x150/> 
< / div> 
< / div> 
< div class =hiddenContentdata-content-id =1>隐藏内容1< / div> 
< div class =hiddenContentdata-content-id =2>隐藏内容2< / div> 
< div class =hiddenContentdata-content-id =3>隐藏内容3< / div> 
< div class =hiddenContentdata-content-id =4>隐藏内容4< / div> 
< div class =hiddenContentdata-content-id =5>隐藏内容5< / div> 
  

CSS：

  .hiddenContent {
 display：none; 
} 
 .clickThisPicture {
 float：left; 
 border：1px solid＃000; 
 
  

Javascript：

<$ （'click'，function（event）{
var contentId（'。clickThisPicture'）。pre> $（document）.ready（function（）{
$ = $（this）.data（'content-id'）;
$（。hiddenContent [data-content-id ='+ contentId +'']）。dialog（{
modal ：true，
resizable：false，
draggable：false，
closeOnEscape：false，
dialogClass：no-close，
按钮：{
Close：function（）{
$（this）.dialog（destroy）;
}
}
}）;
}）;
}）;


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

I am after a little help - I'm not a great programmer, and can usually find the answers to my questions with googling, but not this time!

I am trying to produce a specific effect on a webpage, and am struggling to find some basic JS I can modify/tweak to do what I need.

I am going to put a panel of 10 images, in two rows of five, across a webpage. Each image will have a 'Name' above it, and a 'Job Title' below it. When the image is clicked on, I'd like the (relevant) hidden div to display, over the top of all the images - i.e. with the top left corner matching the top left corner of the first image. The div will be a pre-set width.

In the top corner of each div I want a simple close button.

So, what I am trying to produce is code that's scalable - i.e. in theory it shouldn't matter how many images there are as long as I get the structure right, when you click on the image, it 'shows' the correct hidden div.

We already load jQuery on to the webpage, so using that would be no problem.

Any advice/links to snippets/pointers would be appreciated!

解决方案

This is quite simply achieved with jQuery and jQueryUI.

For brevity I have only included 5 images here 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");
                }
            }
        });
    });
});

EDIT: I updated the code to hide the default close button so as to destroy the element each time as the OP asked for scalability so having potentially 100's/1000's of extra elements in the DOM would lead to memory issues. eventually.

这篇关于Javascript以显示隐藏的div覆盖与点击关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！