如何在不禁用父屏幕的情况下使用Colorbox弹出窗口

时间:2014-04-23 10:30:01

标签: javascript asp.net css popup colorbox

我被要求管理网络应用程序。之前的开发人员使用colorbox来显示弹出窗口。当弹出窗口打开时,它会禁用父屏幕。

是否可以使用不会禁用父屏幕的colorbox在同一页面中使用另一个弹出窗口。即在父窗口中单击而不关闭颜色框窗口。

网络应用程序是使用asp.net和vb.net构建的。

它是雇主的在线门户网站。打开colorbox弹出窗口的代码如下。

<span class="pull-right">

       <a class="hover-glow colorbox"
                 data-placement="bottom" rel="tooltip"
                 title="view cv"
                 data-bind="attr: { 'href': 'cv-preview.aspx?c=' + CvId }">
                 <i class=" icon icon-file "></i></a>

       <a class="hover-glow"
                 data-placement="bottom" rel="tooltip"
                 title="change status"
                 data-bind="attr: { 'href': 'update-status_popup.aspx?i=' + Id + '&c=' + StatusId }">
                 <i class="icon icon-random"></i></a>
</span>

目前使用colorbox的第一个链接(view cv)在弹出窗口中打开候选cv。并在另一页面中打开第二个链接(更改状态)以更改候选应用程序状态。

要求是在类似类型的弹出窗口中打开第二个链接,但不禁用父屏幕。用户希望同时在两个屏幕上工作。

我不想使用ajax。

我将不胜感激任何帮助和建议。

下面给出了颜色框的css

             #cboxOverlay,#cboxWrapper,#colorbox{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
             #cboxOverlay{position:fixed;width:100%;height:100%}
             #cboxBottomLeft,#cboxMiddleLeft{clear:left}
             #cboxContent{position:relative}
             #cboxLoadedContent{overflow:auto}
             #cboxTitle{margin:0}
             #cboxLoadingGraphic,#cboxLoadingOverlay{position:absolute;top:0;left:0;width:100%}
             #cboxClose,#cboxNext,#cboxPrevious,#cboxSlideshow{cursor:pointer}
             .cboxPhoto{float:left;margin:auto;border:0;display:block}
             .cboxIframe{width:100%;height:100%;display:block;border:0}
             #cboxOverlay{background:#777}
             #cboxContent{margin-top:20px}
             #cboxError{padding:50px;border:1px solid #ccc}
             #cboxLoadedContent{background:#fff}
             #cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}
             #cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc;display:none!important}
             #cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}
             #cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px;display:none!important}
             #cboxPrevious.hover{background-position:bottom left}
             #cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px;display:none!important}
             #cboxNext.hover{background-position:bottom right}
             #cboxLoadingOverlay{background:#000}
             #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center}
             #cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px;z-index:-1}
             #cboxClose.hover{background-position:bottom center}
             #newPriv,#newTerm{display:none}
             #exPriv,#exTerm{padding:10px;border:1px solid #dedede}    

如果不能有两个不同的带彩色框的弹出窗口,请另外建议。

谢谢

1 个答案:

答案 0 :(得分:1)

这个问题的答案是肯定的。要查看此证明,只需访问 Colorbox示例页面: http://www.jacklmoore.com/colorbox/example1/

要了解如何实现此功能,请参阅 Colorbox文档 Colorbox初学者指南