how to use Colorbox popup without disabling the parent screen

问题

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.

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

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>

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.

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.

i don't want to use ajax.

i would appreciate any help and suggestion.

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.

Thanks

回答1:

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/

来源：https://stackoverflow.com/questions/23241626/how-to-use-colorbox-popup-without-disabling-the-parent-screen

标签

javascript

ASP.NET

css

popup

colorbox