鎖定和不透明不花哨與fancyBox JQuery

在fancyBox網站上的每一個代碼示例中，陰影框鎖定背景內容並默認爲灰色。我曾嘗試不放入任何代碼，並嘗試將代碼手動添加到代碼中，無論我如何操作，它都不會鎖定內容或更改背景內容的不透明度。這是我的代碼和測試頁面。測試頁：http://docuvital.com/docuvital/includes/themes/merced/templates/guitester.cfm 鎖定和不透明不花哨與fancyBox JQuery

<!-- Add jQuery library --> 
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> 

<!-- Add mousewheel plugin (this is optional) --> 
<script type="text/javascript"src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 

<!-- Add fancyBox --> 
<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/jquery.fancybox.pack.js?v=2.1.5"></script> 

<!-- Optionally add helpers - button, thumbnail and/or media --> 
<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> 

<link rel="stylesheet" href="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> 
<script type="text/javascript" src="#APP_ROOT#/includes/themes/merced/templates/shadowbox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox(); 
    }); 
</script> 

</head> 
</cfoutput> 
<body> 
this is some test stuff 
<script> 
$.fancybox.open([ 
{ 
    helpers : { 

    overlay : { 
    locked : true, 
     css : { 
      'background' : 'rgba(58, 42, 45, 0.95)' 
     } 
    } 
}, 
content : 'test', 
title: "test page" 
}  
]); 
</script>

來源

2013-09-01 Michael Payne

@putvande是正確的。 – JFK

您試圖在初始化之前打開Fancybox。您需要將$.fancybox.open放置在$(document).ready(之內，或者至少等待文檔加載。

$(document).ready(function() { 
    $(".fancybox").fancybox(); 

    $.fancybox.open([{ 
     helpers: { 

      overlay: { 
       locked: true, 
       css: { 
        'background': 'rgba(58, 42, 45, 0.95)' 
       } 
      } 
     }, 
     content: 'test', 
     title: "test page" 
    }]); 
});

來源

2013-09-01 11:11:26 putvande

我在之前看到過其他帖子，但不知道如何應用它。感謝您清理它。奇蹟般有效！ –

鎖定和不透明不花哨與fancyBox JQuery

回答

相關問題