图像放大鼠标悬停时的模态弹出窗口 [英] Image zooming in a modal popup on mouse hovering
本文介绍了图像放大鼠标悬停时的模态弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理一个用于缩放图像的应用程序，其中鼠标悬停在图像控件中的模态弹出窗口中有描述。弹出窗口中显示的图像和文本应从数据库中获取。对于这个应用程序，我使用了css，jquery和ajax。当鼠标悬停在图像控制上时，我正在获得从数据库中获取数据的完美弹出窗口。但当徘徊时弹出窗口不会消失。在我的弹出窗口中有一个关闭选项，点击弹出窗口就会消失。
谢谢........
Hi,
I''m handling an application for zooming an image with its description in a modal popup on mouse hovering in an image control. The image and text displayed in the popup should be fetched from database. For this application i have used css,jquery and ajax. When mouse hovering on image control, i''m getting perfect popup with datas fetching from database. But when hover out the popup will not be disappeared. In my popup there is a close option while clicking it popup will get disappeared.
Thanks........
推荐答案
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src='js/ddimgtooltip.js'></script>
<title></title>
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<script type="text/javascript" >
function fn(mm) {
InsertData(mm);
（' ＃basic-modal-content'）。modal（）;
return false ;
}
< / script >
< / head >
< 正文 >
< script >
函数GetRequestObject（）{
if （ window.XMLHttpRequest）{
return new XMLHttpRequest（）;
} else if （window.ActiveXObject）{
return new ActiveXObject（ Microsoft.XMLHTTP）;
} else {
alert（ 你的浏览器很糟糕！\ n是关于升级的时间你不觉得吗？）;
}
}
var InsertRequest = GetRequestObject（）;
函数InsertData（xx）{
if （InsertRequest.readyState == 4 || InsertRequest.readyState == 0 ）{
var str = xx.id;
// alert（str）;
InsertRequest.open（ GET，' Default2.aspx？imgid =' + str， true ）;
InsertRequest.onreadystatechange = HandleInsertProcess;
InsertRequest.send（ null ）;
}
}
函数HandleInsertProcess（）{
if （InsertRequest.readyState == 4 ）{
var str = InsertRequest.responseText;
document.getElementById（ popupid）。innerHTML = str;
}
}
< / script >
< 表格 id = form1 runat = server >
< div id = container >
< div id = < span class =code-keyword> logo >
< h1 > 简单< < span class =code-leadattribute> span > 模态< / span > < / h1 >
< span class = title > < / span >
< / div >
< div id = content >
< div < span class =code-attribute> id = basic-modal >
< h3 > < / h3 >
< p >
< / p >
<！ - < input class =basic name =basictype =buttonvalue =Demo/>或者< a class =basichref =＃> Demo< / a> - >
< asp：图像 ID = Img1 runat = server < span class =code-attribute> img src = img / basic / flw1.JPG 高度 = 51px 宽度 = 61px onmouseover = return fn（this） / >
< asp：图像 ID = Img2 runat = server img src = img / basic / flw2.JPG 高度 = 51px 宽度 = 61px onmouseover = 返回fn（this） / >
< asp：图像 ID = Img3 runat = server img src = img / basic / flw3.JPG 高度 = 51px 宽度 = 61px onmouseover = return fn（this ） / >
< asp：图像 ID = Img4 runat = server img src = img / basic / flw4.JPG 高度 = 51px 宽度 = 61px onmouseover = return fn（this） / >
< / div >
<！ - 模态内容 - >
< div < span class =code-attribute> id = basic-modal-content title = style = 溢出：隐藏;宽度：400像素;宽度：400像素; >
< div class = header3 样式 = width： 400px > 图像和说明< / div >
< br / >
< br / >
< br / >
< br / >
< table style = width：400px ;溢出：隐藏 >
< tr >
< td class = style1 >
< / td >
< / tr >
< tr < span class =code-keyword>>
< td >
< div id = popupid >
< / div >
< / td >
< / tr >
< / table >
& nbsp; < br / >
& nbsp;
< br / >
< br / >
< / div >
< / div >
<！ - nnnnnnnn - >
< div id =' Div1' >
< div id =' Div2' >
< h1 >
< / div >
< / div >
<！ - 加载jQuery，SimpleModal和Basic JS文件 - >
< script type =' text / javascript' src =' js / jquery.js' > < / script >
< script 类型 =' text / javascript' src =' js / jquery.simplemodal.js' > < / script >
< script 类型 =' text / javascript ' src =' js / basic.js' > < / script >
<！ - nnnnnnnn - >
<！ - 预装图片 - >
< div 样式 = display：none >
< img alt = src = img / basic / x.png / >
< / div >
< ; / div >
< div id = 页脚 >
< / div > ;
< / div >
< / form >
< / body >
< / html >
('#basic-modal-content').modal(); return false; } </script> </head> <body> <script > function GetRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?"); } } var InsertRequest = GetRequestObject(); function InsertData(xx) { if (InsertRequest.readyState == 4 || InsertRequest.readyState == 0) { var str = xx.id; //alert(str); InsertRequest.open("GET", 'Default2.aspx?imgid=' + str, true); InsertRequest.onreadystatechange = HandleInsertProcess; InsertRequest.send(null); } } function HandleInsertProcess() { if (InsertRequest.readyState == 4) { var str = InsertRequest.responseText; document.getElementById("popupid").innerHTML = str; } } </script> <form id="form1" runat="server"> <div id="container"> <div id="logo"> <h1>Simple<span>Modal</span></h1> <span class="title"></span> </div> <div id="content"> <div id="basic-modal"> <h3></h3> <p> </p> <!-- <input class="basic" name="basic" type="button" value="Demo" /> or <a class="basic" href="#">Demo</a> --> <asp:Image ID="Img1" runat="server" img src="img/basic/flw1.JPG" Height="51px" Width="61px" onmouseover ="return fn(this)" /> <asp:Image ID="Img2" runat="server" img src="img/basic/flw2.JPG" Height="51px" Width="61px" onmouseover ="return fn(this)" /> <asp:Image ID="Img3" runat="server" img src="img/basic/flw3.JPG" Height="51px" Width="61px" onmouseover ="return fn(this)" /> <asp:Image ID="Img4" runat="server" img src="img/basic/flw4.JPG" Height="51px" Width="61px" onmouseover ="return fn(this)" /> </div> <!-- modal content --> <div id="basic-modal-content" title="" style="overflow:hidden; width:400px;width:400px;" > <div class="header3" style="width:400px">Image and Description</div> <br /> <br /> <br /> <br /> <table style="width:400px;overflow:hidden"> <tr> <td class="style1"> </td> </tr> <tr> <td> <div id="popupid"> </div> </td> </tr> </table> <br /> <br /> <br /> </div> </div> <!--nnnnnnnn--> <div id='Div1'> <div id='Div2'> <h1> </div> </div> <!-- Load jQuery, SimpleModal and Basic JS files --> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/basic.js'></script> <!--nnnnnnnn--> <!-- preload the images --> <div style="display:none"> <img alt="" src="img/basic/x.png" /> </div> </div> <div id="footer"> </div> </div> </form> </body> </html>
<<<<< jquery>>>>>>
<<<<jquery>>>>>>
/*
* SimpleModal 1.4.3 - jQuery Plugin
* http://simplemodal.com/
* Copyright (c) 2012 Eric Martin
* Licensed under MIT and GPL
* Date: Sat, Sep 8 2012 07:52:31 -0700
*/
(function(b){"function"===typeof define&&define.amd?define(["jquery"],b):b(jQuery)})(function(b){var j=[],l=b(document),m=b.browser.msie&&6===parseInt(b.browser.version)&&"object"!==typeof window.XMLHttpRequest,o=b.browser.msie&&7===parseInt(b.browser.version),n=null,k=b(window),h=[];b.modal=function(a,d){return b.modal.impl.init(a,d)};b.modal.close=function(){b.modal.impl.close()};b.modal.focus=function(a){b.modal.impl.focus(a)};b.modal.setContainerDimensions=function(){b.modal.impl.setContainerDimensions()};
b.modal.setPosition=function(){b.modal.impl.setPosition()};b.modal.update=function(a,d){b.modal.impl.update(a,d)};b.fn.modal=function(a){return b.modal.impl.init(this,a)};b.modal.defaults={appendTo:"body",focus:!0,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:!1,autoPosition:!0,zIndex:1E3,close:!0,closeHTML:'<a class="modalCloseImg" title="Close"></a>',
closeClass:"simplemodal-close",escClose:!0,onmouseoverClose:!0,overlayClose:!1,fixed:!0,position:null,persist:!1,modal:!0,onOpen:null,onShow:null,onClose:null};b.modal.impl={d:{},init:function(a,d){if(this.d.data)return!1;n=b.browser.msie&&!b.support.boxModel;this.o=b.extend({},b.modal.defaults,d);this.zIndex=this.o.zIndex;this.occb=!1;if("object"===typeof a){if(a=a instanceof b?a:b(a),this.d.placeholder=!1,0<a.parent().parent().size()&&(a.before(b("><span></span>").attr("id","simplemodal-placeholder").css({display:"none"})),
this.d.placeholder=!0,this.display=a.css("display"),!this.o.persist))this.d.orig=a.clone(!0)}else if("string"===typeof a||"number"===typeof a)a=b("<div></div>").html(a);else return alert("SimpleModal Error: Unsupported data type: "+typeof a),this;this.create(a);this.open();b.isFunction(this.o.onShow)&&this.o.onShow.apply(this,[this.d]);return this},create:function(a){this.getDimensions();if(this.o.modal&&m)this.d.iframe=b('<iframe src="javascript:false;"></iframe>').css(b.extend(this.o.iframeCss,
{display:"none",opacity:0,position:"fixed",height:h[0],width:h[1],zIndex:this.o.zIndex,top:0,left:0})).appendTo(this.o.appendTo);this.d.overlay=b("<div></div>").attr("id",this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss,{display:"none",opacity:this.o.opacity/100,height:this.o.modal?j[0]:0,width:this.o.modal?j[1]:0,position:"fixed",left:0,top:0,zIndex:this.o.zIndex+1})).appendTo(this.o.appendTo);this.d.container=b("<div></div>").attr("id",this.o.containerId).addClass("simplemodal-container").css(b.extend({position:this.o.fixed?
"fixed":"absolute"},this.o.containerCss,{display:"none",zIndex:this.o.zIndex+2})).append(this.o.close&&this.o.closeHTML?b(this.o.closeHTML).addClass(this.o.closeClass):"").appendTo(this.o.appendTo);this.d.wrap=b("<div></div>").attr("tabIndex",-1).addClass("simplemodal-wrap").css({height:"100%",outline:0,width:"100%"}).appendTo(this.d.container);this.d.data=a.attr("id",a.attr("id")||this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss,{display:"none"})).appendTo("body");this.setContainerDimensions();
this.d.data.appendTo(this.d.wrap);(m||n)&&this.fixIE()},bindEvents:function(){var a=this;b("."+a.o.closeClass).bind("click.simplemodal",function(b){b.preventDefault();a.close()});a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind("click.simplemodal",function(b){b.preventDefault();a.close()});l.bind("keydown.simplemodal",function(b){a.o.modal&&9===b.keyCode?a.watchTab(b):a.o.close&&a.o.escClose&&27===b.keyCode&&(b.preventDefault(),a.close())});k.bind("resize.simplemodal orientationchange.simplemodal",
function(){a.getDimensions();a.o.autoResize?a.setContainerDimensions():a.o.autoPosition&&a.setPosition();m||n?a.fixIE():a.o.modal&&(a.d.iframe&&a.d.iframe.css({height:h[0],width:h[1]}),a.d.overlay.css({height:j[0],width:j[1]}))})},unbindEvents:function(){b("."+this.o.closeClass).unbind("click.simplemodal");l.unbind("keydown.simplemodal");k.unbind(".simplemodal");this.d.overlay.unbind("click.simplemodal")},fixIE:function(){var a=this.o.position;b.each([this.d.iframe||null,!this.o.modal?null:this.d.overlay,
"fixed"===this.d.container.css("position")?this.d.container:null],function(b,f){if(f){var g=f[0].style;g.position="absolute";if(2>b)g.removeExpression("height"),g.removeExpression("width"),g.setExpression("height",'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"'),g.setExpression("width",'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"');else{var c,e;a&&a.constructor===
Array?(c=a[0]?"number"===typeof a[0]?a[0].toString():a[0].replace(/px/,""):f.css("top").replace(/px/,""),c=-1===c.indexOf("%")?c+' + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"':parseInt(c.replace(/%/,""))+' * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',a[1]&&(e="number"===typeof a[1]?
a[1].toString():a[1].replace(/px/,""),e=-1===e.indexOf("%")?e+' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"':parseInt(e.replace(/%/,""))+' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"')):(c='(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',
e='(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');g.removeExpression("top");g.removeExpression("left");g.setExpression("top",c);g.setExpression("left",e)}}})},focus:function(a){var d=this,a=a&&-1!==b.inArray(a,["first","last"])?a:"first",f=b(":input:enabled:visible:"+a,d.d.wrap);setTimeout(function(){0<f.length?f.focus():d.d.wrap.focus()},>
10)},getDimensions:function(){var a="undefined"===typeof window.innerHeight?k.height():window.innerHeight;j=[l.height(),l.width()];h=[a,k.width()]},getVal:function(a,b){return a?"number"===typeof a?a:"auto"===a?0:0b);this.setContainerDimensions();this.d.data.show();this.o.focus&&this.focus();this.unbindEvents();this.bindEvents()},setContainerDimensions:function(){var a=m||o,d=this.d.origHeight?this.d.origHeight:b.browser.opera?this.d.container.height():this.getVal(a?this.d.container[0].currentStyle.height:this.d.container.css("height"),"h"),a=this.d.origWidth?this.d.origWidth:b.browser.opera?this.d.container.width():this.getVal(a?this.d.container[0].currentStyle.width:this.d.container.css("width"),"w"),f=this.d.data.outerHeight(!0),
g=this.d.data.outerWidth(!0);this.d.origHeight=this.d.origHeight||d;this.d.origWidth=this.d.origWidth||a;var c=this.o.maxHeight?this.getVal(this.o.maxHeight,"h"):null,e=this.o.maxWidth?this.getVal(this.o.maxWidth,"w"):null,c=c&&c<h[0]?c:h[0],e>c?c:d<i?i:d:f?f>c?c:this.o.minHeight&&"auto"!==i&&f<i?i:f:i,c>e?e:a<c?c:a:>
g?g>e?e:this.o.minWidth&&"auto"!==c&&g<c?c:g:c;this.d.container.css({height:d,width:a});this.d.wrap.css({overflow:f>d||g>a?"auto":"visible"});this.o.autoPosition&&this.setPosition()},setPosition:function(){var a,b;a=h[0]/2-this.d.container.outerHeight(!0)/2;b=h[1]/2-this.d.container.outerWidth(!0)/2;var f="fixed"!==this.d.container.css("position")?k.scrollTop():0;this.o.position&&"[object Array]"===Object.prototype.toString.call(this.o.position)?(a=f+(this.o.position[0]||a),b=this.o.position[1]||
b):a=f+a;this.d.container.css({left:b,top:a})},watchTab:function(a){if(0<b(a.target).parents(".simplemodal-container").length){if(this.inputs>try this http://www.visual-blast.com/jquery/jqzoom-jquery-plugin/[^]
try this http://www.visual-blast.com/jquery/jqzoom-jquery-plugin/[^]
这篇关于图像放大鼠标悬停时的模态弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
