带有进度条的modalpopup图像预览 [英] modalpopup image preview with progress bar
问题描述
我有一个照相馆页面，当用户单击缩略图时，原始图像应显示在modalpopup中.在加载原始图像之前，它还应该在modalpopup中显示进度条.
Hi,
i have a photo gallery page and when the user clicks on the thumbnail image the original image should be displayed in the modalpopup. it should also display the progress bar in the modalpopup before the original image gets loaded.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divModalBackground
{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
width: 100%;
background-color: #999988;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Image runat="server" ID="image2" ImageUrl="images/small/ground_main.jpg" />
<asp:Image runat="server" ID="image3" ImageUrl="images/small/R.C.C main.jpg" />
<asp:Image runat="server" ID="image4" ImageUrl="images/small/rehab_main.jpg" />
<asp:Image runat="server" ID="image5" ImageUrl="images/small/steel_main.jpg" />
<asp:Button ID="btnPop" runat="server" Text="Button" Style="display: none" />
<asp:Panel runat="server" ID="panel1" Style="display: none; background-color: White;">
<div style="text-align: center; padding: 0 5px">
<asp:Button runat="server" ID="btncancel" Text="close" /></div>
<img id="popImg" src="" />
</asp:Panel>
<asp:ModalPopupExtender ID="modal1" runat="server" BackgroundCssClass="divModalBackground"
TargetControlID="btnPop" PopupControlID="panel1" CancelControlID="btncancel"
OnCancelScript="hpop()" RepositionMode="RepositionOnWindowScroll">
</asp:ModalPopupExtender>
</div>
</form>
</body>
<script language="javascript" type="text/javascript">
function mpop(path) {
document.getElementById("popImg").src = path;
$find('modal1').show();
return false;
}
function hpop() {
$find('modal1').hide();
}
</script>
</html>
在aspx.cs文件中，我具有以下代码
and in aspx.cs file i have the following code
protected void Page_Load(object sender, EventArgs e)
{
// since the original images are in the folder named "big" i'm changing the path as follows...
image2.Attributes.Add("onclick", "return mpop('" + image2.ImageUrl.Replace("small", "big") + "');");
image3.Attributes.Add("onclick", "return mpop('" + image3.ImageUrl.Replace("small", "big") + "');");
image4.Attributes.Add("onclick", "return mpop('" + image4.ImageUrl.Replace("small", "big") + "');");
image5.Attributes.Add("onclick", "return mpop('" + image5.ImageUrl.Replace("small", "big") + "');");
// i.e the path 'images/small/ground_main.jpg' will became 'images/big/ground.main.jpg'
}
图像被加载到modalpopup中.但我想在加载图像之前在modalpopup中显示进度条.
在此先感谢.
问候，
siva<
the images gets loaded in the modalpopup. but i want to show a progressbar inside the modalpopup before the image gets loaded.
thanks in advance.
regards,
siva<
推荐答案
find(' modal1' span>).show(); 返回 假； } 函数 hpop(){
find('modal1').show(); return false; } function hpop() {
find(' modal1').hide(); } < / 脚本 > < /html >
find('modal1').hide(); } </script> </html>
在aspx.cs文件中，我具有以下代码
and in aspx.cs file i have the following code
protected void Page_Load(object sender, EventArgs e)
{
// since the original images are in the folder named "big" i'm changing the path as follows...
image2.Attributes.Add("onclick", "return mpop('" + image2.ImageUrl.Replace("small", "big") + "');");
image3.Attributes.Add("onclick", "return mpop('" + image3.ImageUrl.Replace("small", "big") + "');");
image4.Attributes.Add("onclick", "return mpop('" + image4.ImageUrl.Replace("small", "big") + "');");
image5.Attributes.Add("onclick", "return mpop('" + image5.ImageUrl.Replace("small", "big") + "');");
// i.e the path 'images/small/ground_main.jpg' will became 'images/big/ground.main.jpg'
}
图像被加载到modalpopup中.但我想在加载图像之前在modalpopup中显示进度条.
在此先感谢.
问候，
siva<
the images gets loaded in the modalpopup. but i want to show a progressbar inside the modalpopup before the image gets loaded.
thanks in advance.
regards,
siva<
大多数进度指示器都是简单的gif动画，可根据需要显示或隐藏.您可以将进度图像添加到模式弹出窗口div中，并处理下载图像的onload事件以将其隐藏.
Most progress indicators are simply animated gif that are shown or hidden as necessary. In your case, add the progress image to the modal popup div and handler the onload event for the downloaded image to hide it.
这篇关于带有进度条的modalpopup图像预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
