如何使用彩盒弹出没有禁用父屏幕 [英] how to use Colorbox popup without disabling the parent screen

查看:228
本文介绍了如何使用彩盒弹出没有禁用父屏幕的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在问一个Web应用程序后的样子。在previous开发商已经用颜色框显示弹出式窗口。当弹出窗口打开它禁用父屏幕。

I have been asked to look after a web application. The previous developer has used colorbox to display popup window. When the popup is open it disables the parent screen.

是否有可能在使用颜色框,不会禁用父屏幕在同一页面另一个弹出。即点击父窗口不关闭颜色框窗口。

Is it possible to have another popup in the same page using colorbox which will not disable the parent screen. i.e click in the parent window without closing the colorbox window.

在Web应用程序是建立与asp.net和vb.net。

The web app is built with asp.net and vb.net.

及其雇主在线门户网站。用于打开颜色框弹出的code为如下。

Its a online portal for employers. The code for opening the colorbox popup is given below.

<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>

目前,它使用颜色框(查看简历)1号链接打开候选人在弹出窗口中的简历。而第二个链接(改变状态)的另一页改变考生的申请状态打开。

currently the 1st link which uses colorbox (view cv) opens candidates cv in a popup window. and the 2nd link (change status) opens in another page to change candidates application status.

的要求是打开在相似类型弹出的,但没有禁用父画面的第2连结。用户想要在同一时间都在屏幕上的工作

the requirement is to open the the 2nd link in similar type of popup but without disabling the parent screen. the user wants to work on both screen at the same time.

我不希望使用AJAX。

i don't want to use ajax.

我将AP preciate任何帮助和建议。

i would appreciate any help and suggestion.

有关颜色框的CSS已经给出如下

the css for the color box has been given below

             #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}    

如果这是不可能有一个与彩色盒两种不同的弹出,请建议的另一种方法。

if it is not possible to have two different popup with color box, please suggest an alternate way.

感谢

推荐答案

在这个问题的答案是肯定的。看到这方面的证据,只需访问彩盒范例页面: 的http:// www.jacklmoore.com/colorbox/example1/

The answer to this question is yes. To see proof of this, just visit the Colorbox Examples page: http://www.jacklmoore.com/colorbox/example1/

要了解如何实现此功能,请参阅彩盒文档彩盒新手引导

To understand how to implement this functionality, refer to the Colorbox documentation and the Colorbox beginners guide:

  • http://www.jacklmoore.com/colorbox/
  • http://www.jacklmoore.com/colorbox/guide/

这篇关于如何使用彩盒弹出没有禁用父屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆