如何让我的弹出图像继续显示？
我正在开发一个网页，其中包含从本地地理服务器提供的缩略图。所需的效果是将缩略图扩展到可以移动的对话窗口中。我能够创建对话框并展开缩略图，但是当我关闭对话框时，它会将其删除，直到重新加载页面。这是xslt，其中包含图像的来源以及如何创建html：
<xsl:for-each select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<!-- shift the context to the lookup elements -->
<xsl:variable name="raster_label">
<xsl:apply-templates select="$metacard_label-top">
<xsl:with-param name="curr-label" select="@codeList"/>
</xsl:apply-templates>
</xsl:variable>
<xsl:choose>
<xsl:when test=". != ''"> <!-- If the element value is not null, display it. Else display attribute value. -->
<xsl:value-of select="." /> - <xsl:value-of select="$raster_label" /><br />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@codeListValue" /> - <xsl:value-of select="$raster_label" /><br />
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="rasterType" select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes"></xsl:variable>
<xsl:variable name="identifier" select="/tdf:TrustedDataObject/tdf:HandlingAssertion/tdf:HandlingStatement/edh:ExternalEdh/edh:Identifier"></xsl:variable>
<xsl:variable name="codeLVal" select="@codeListValue"/>
<xsl:variable name="aoi_min_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:westBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_min_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:southBoundLatitude/gco:Decimal"/>
<xsl:variable name="aoi_max_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:eastBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_max_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:northBoundLatitude/gco:Decimal"/>
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');" height= '85' width = '100'></img><!-- this works -->
<div id="dialog" class="hide-dialog" style="display: none"><img class='aoi' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');"></img></div>
</xsl:for-each>
这是当前控制点击功能的javascript。我发现click事件必须在javascript的render函数中。
$('.AOIMapFir').on('click',function(evt){
$('#dialog').dialog({
autoOpen: false,
appendTo: ".widget",
title: "Area of Interest",
resizable: false,
close: function(event,ui){
var holder = "<div id='dialog' class='hide-dialog' style='display: none'><img class='aoi' src='$(this).attr('src')' ></img></div>"
$('#dialog').dialog("destroy").remove();
$(this).append(holder);
},
position: {
my: "center",
at: "center",
of: ".container"
},
width: "auto",
overflow:"auto",
height: "auto",
closeOnEscape: true,
show: { effect: "blind", duration: 200 }
});
// $('.aoi').attr('src', $('.AOIMapFir').attr('src'));
$("#dialog").dialog("open");
// $("#dialog").dialog("close", function(evt){
// $("#dialog").dialog("destroy");
// });
$(".ui-widget").css({
"font-size": +10+"px",
"background-color": "none"
});
});
这是点击缩略图之前的屏幕截图：
这是点击缩略图后的屏幕截图：
所以再一次，我的问题是，在关闭窗口后，我无法再次打开它。谢谢！
2 个答案:
答案 0 :(得分：1)
问题在于您的近距离功能：
close: function(event,ui){
var holder = "<div id='dialog' class='hide-dialog' style='display: none'><img class='aoi' src='$(this).attr('src')' ></img></div>"
$('#dialog').dialog("destroy").remove();
$(this).append(holder);
}
你正在摧毁并移除#dialog div，然后尝试追加它 - holder永远不会附加，因为没有任何内容可以追加。 （您应该能够通过运行某些控制台日志记录来确认这一点 - 请注意，如果您console.log($(this))，您将获得非空结果，因为this不是对查找的引用，而是javascript DOM #dialog选择器在函数开头创建的元素对象;尝试console.log($('#dialog'))确认它不再存在。）
一个简单的方法是允许对话框简单地关闭，而不是销毁和删除它。您可以通过完全删除初始化中的close键来完成此操作：
$('#dialog').dialog({
autoOpen: false,
appendTo: ".widget",
title: "Area of Interest",
resizable: false,
position: {
my: "center",
at: "center",
of: ".container"
},
width: "auto",
overflow:"auto",
height: "auto",
closeOnEscape: true,
show: { effect: "blind", duration: 200 }
});
或者，如果您需要在近距离功能中执行某些操作，请直接致电$('#dialog').dialog(close)：
$('#dialog').dialog({
...
close: function(event, ui) {
... // do whatever you need to do here
$('#dialog').dialog('close');
},
...
});
答案 1 :(得分：0)
我完全解决了我的问题，因为必须附加一个使用点击缩略图源的元素来获取扩展的缩略图。我从xslt中删除了一个。这是xslt：
<xsl:for-each select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<!-- shift the context to the lookup elements -->
<xsl:variable name="raster_label">
<xsl:apply-templates select="$metacard_label-top">
<xsl:with-param name="curr-label" select="@codeList"/>
</xsl:apply-templates>
</xsl:variable>
<xsl:choose>
<xsl:when test=". != ''"> <!-- If the element value is not null, display it. Else display attribute value. -->
<xsl:value-of select="." /> - <xsl:value-of select="$raster_label" /><br />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@codeListValue" /> - <xsl:value-of select="$raster_label" /><br />
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="rasterType" select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes"></xsl:variable>
<xsl:variable name="identifier" select="/tdf:TrustedDataObject/tdf:HandlingAssertion/tdf:HandlingStatement/edh:ExternalEdh/edh:Identifier"></xsl:variable>
<xsl:variable name="codeLVal" select="@codeListValue"/>
<xsl:variable name="aoi_min_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:westBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_min_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:southBoundLatitude/gco:Decimal"/>
<xsl:variable name="aoi_max_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:eastBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_max_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:northBoundLatitude/gco:Decimal"/>
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');" height= '85' width = '100'></img><!-- this works -->
<!-- <div id="dialog" class="hide-dialog" style="display: none"><img class='aoi' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');"></img></div> -->
</xsl:for-each>
使用Javascript：
render: function( model ) {
var that = this;
this.$( '.mc\\.display' ).remove();
this.$( '.ph' ).remove();
this.$( '.content' ).append( this.addRowShading( model.get('html') ) );
this.$( '.mc\\.display' ).metacardView();
this.$( '.mc' ).css('height', $(window).height()-220+'px' ).mCustomScrollbar({
theme:"cdpe-preview",
advanced:{
updateOnContentResize: true
}
});
this.createExpandingAttrs();
//this.$( '.mc\\.display' ).metacardView('setTabContent', { name:'oob', title: 'Order of Battle Hierarchy' , content: '<div id="oob_hierarchy"></div>'});
this.$("#oob_hierarchy").jstree({
"json_data" : {"data": model.get('oob-tree-json') },
"plugins" : [ "themes", "json_data", "ui" ],
"themes": { "theme": "classic", "dots": false, "icons": true }
})
.bind("select_node.jstree", function (event, data) {
if(data.rslt.obj.data("unit-info")) {
that.toggleUnitInfo(data.rslt.obj);
}
});
//this.$( '.mc\\.display' ).metacardView('setActiveTab', { tabName: 'oob' } );
this.delegateEvents();
$('.AOIMapFir').on('click',function(evt){
var that = this;
var source = this.src;
// Alertify.dialog.alert(this.src);
var holder = '<div id="dialog" class="hide-dialog" style="display: none"><img class="aoi" src="' + source + '" ></img></div>'
$(that).append(holder);
$("#dialog").dialog({
autoOpen: false,
appendTo: ".widget",
title: "Area of Interest",
resizable: false,
close: function(event,ui){
$("#dialog").dialog("destroy").remove();
},
position: {
my: "center",
at: "center",
of: ".container"
},
width: "auto",
overflow:"auto",
height: "auto",
closeOnEscape: true,
show: { effect: "blind", duration: 200 }
});
$("#dialog").dialog("open");
$(".ui-widget").css({
"font-size": +10+"px",
"background-color": "none"
});
});
},
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？