0

URLをクリックすると（カラーボックス内）、カラーボックス自体を閉じる必要があるカラーボックスの実装があります。以下はコードです：

HTML URL をクリックすると、Image の ColorBox が開きます。

<link rel="stylesheet" href="colorbox.css" type="text/css" media="all" /> 
<script src="jquery-1.8.3.min.js" type="text/javascript">
</script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

<script>
$(function() {
$('.colorbox-link').colorbox({
        transition: "none",
        opacity: 0.4,
        onComplete: function(){
            $.colorbox.resize();
        },
        speed: 300,
        width: 530,
        initialWidth: "530",
        innerWidth: 530,
        maxWidth: 530,
        height:false,
        initialHeight: "400",
        innerHeight: false,
        maxHeight: false,
        preloading:false

    });     
});
</script>

<a id="Preview1" href="openpopup.php" class="colorbox-link">Preview</a>

プレビュー URL のクリックで開く POPUP/COLORBOX

<link rel="stylesheet" href="colorbox.css" type="text/css" media="all" />
<script src="jquery-1.8.3.min.js" type="text/javascript">
</script>

<script src="jquery.colorbox-min.js" type="text/javascript">
</script>


<script>
  $(document).ready(function () {

    $('#change').click(function(){

        $('#cboxClose').click();
    });

  });
</script>
<div class="popup-shell">
  <div class="modal-header"> <i id="close-icon" class="icon-close close-trigger"> </i>
    <h2 class="page-title"> Preview Your File </h2>
  </div>
  <div class="popup-body">
    <div class="popup-image-holder"> <a class="demo" href=""> <img src="personal.jpg" /> </a> </div>
  </div>  
  <div class="modal-footer">
    <p class="buttons-small"> <a id="accept" href="javascript:;"> accept </a> <a href="javascript:;" id="change"> change </a> </p>
  </div>
</div>

カラーボックス/ポップアップウィンドウに、どのカラーボックスをクリックすると「変更」リンクが表示されますが、閉じません... SAFARIを除く他のすべてのブラウザで正常に動作します

アプリケーションを見つけることができるデモ URL。Safariでご覧ください。

4

2 に答える 2

0

クリック イベントは実際には要素にバインドされていないに違いありません。liveクリックイベントを要素にバインドするために使用してみてください：

$('body').live('click', '#change' , function(){
    $('#cboxClose').click();
    //or $.colorbox.close()

});
于 2013-08-16T12:06:48.593 に答える
0

<a>jqueryを使用してイベントをアタッチしているため、タグは必要ないと思います。これを試して

<div class="modal-footer">
    <p class="buttons-small">
       <input type ="button" value ="accept" id="accept" />
       <input type ="button" value ="change" id="change" /> 
    </p>
</div>
于 2013-08-16T12:01:24.917 に答える