单击图像时将div显示为弹出窗口

Question

我有一张照片。

当用户点击图片的特定区域时，我想将不同的div显示为弹出窗口。

我想用jquery＆amp; amp; HTML

任何人都可以帮助我。

Answer 1

以下是示例解决方案的示例：http://jsfiddle.net/htEvT/2/

<强>的JavaScript

$('#rabbit').click(function (e) {
    var offset = $(this).offset(),
        left = e.pageX - offset.left,
        top = e.pageY - offset.top;
    if (top > $(this).height() / 2) {
        alertDiv('You\'ve cliked under the middle.', 'alert-white');
    } else {
        alertDiv('You\'ve cliked above the middle.', 'alert-gray');
    }
});

function alertDiv(text, cssClass) {
    var alrt = $('<div class="alert ' + cssClass + '">' + text + '</div>');
    $(document.body).append(alrt);
    alrt.click(function () {
        alrt.remove();
    });
}
​

<强> CSS

.alert {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.alert-white {
    background: white;
}
.alert-gray {
    background: #ccc;
}
​

<强> HTML

<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="rabbit" alt="" />​

如果我的解决方案有任何问题，请告诉我。 ：）

Answer 2

在图像上使用图像映射，并在图像的不同部分附加花式框。因为，你没有发布代码，所以我不能提供相同的编码解决方案。

Answer 3

下面的内容应该会给你一个如何做到这一点的想法：

$("img").click(function() {
  $("body").append("<div class='newdiv'></div>")
})



.newdiv{width:100px; height:300px;border:1px solid red;}

Answer 4

我最喜欢的是 Fancybox。

我还没有看到它无法做到的事情。伟大的文档和广泛使用，所以如果你需要帮助，其他人有很高的机会问同样的问题，并可以通过一个简单的谷歌解决。

Answer 5

在HTML页面上创建名为“imgbox”的DIV，将在其上显示缩略图图像。与DIV关联的DIV和CSS元素ID如下所示

<div id="imgbox"></div>

css

#imgbox 
{
vertical-align : middle;
position : absolute;
border: 1px solid #999;
background : #FFFFFF; 
filter: Alpha(Opacity=100);
visibility : hidden;
height : 200px;
width : 200px;
z-index : 50;
overflow : hidden;
text-align : center;

}

以下是显示弹出窗口图像的JavaScript代码： 获取缩略图图像的左侧和顶部位置：

function getElementLeft(elm) 
{
 var x = 0;

//set x to elm’s offsetLeft
x = elm.offsetLeft;

//set elm to its offsetParent
elm = elm.offsetParent;

//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent

while(elm != null)
{
    x = parseInt(x) + parseInt(elm.offsetLeft);
    elm = elm.offsetParent;
}
return x;
}

function getElementTop(elm) 
{
 var y = 0;

//set x to elm’s offsetLeft
y = elm.offsetTop;

//set elm to its offsetParent
elm = elm.offsetParent;

//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent

while(elm != null)
{
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
}

return y;
}

获取缩略图图像源，使DIV可见，将高度和宽度增加到所需大小，然后将图像附加到DIV。

function Large(obj)

{     var imgbox = document.getElementById（“imgbox”）;     imgbox.style.visibility = '可见';     var img = document.createElement（“img”）;     img.src = obj.src;     img.style.width = '200像素';     img.style.height = '200像素';

if(img.addEventListener){
    img.addEventListener('mouseout',Out,false);
} else {
    img.attachEvent('onmouseout',Out);
}             
imgbox.innerHTML='';
imgbox.appendChild(img);
imgbox.style.left=(getElementLeft(obj)-50) +'px';
imgbox.style.top=(getElementTop(obj)-50) + 'px';
}
Hide the DIV at mouse out.

function Out()
{
 document.getElementById("imgbox").style.visibility='hidden';
}

为缩略图图像添加OnMouseOver客户端事件调用，以便在鼠标悬停时显示弹出图像。

<img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />

Answer 6

如果区域是方形，则可以将透明元素放在所需区域，并为其指定一个简单的onClick事件。

Answer 7

使用SimpleModal

您可以使用插件SimpleModal来实现您想要的目标。

  

SimpleModal是一个轻量级的jQuery插件，为模态对话框开发提供了强大的界面。将其视为模态对话框架。 SimpleModal使您可以灵活地构建您可以想象的任何内容，同时保护您免受UI开发固有的相关跨浏览器问题的影响。

使用它，您可以调用已存在的div或动态创建模态。

调用现有的div：

$("#element-id").modal();

动态制作模态：

$.modal("<div><h1>SimpleModal</h1></div>");

提供选项：

$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});

演示：

此处有更多演示：http://www.ericmmartin.com/projects/simplemodal-demos/