如何打开具有特定 ID 或类的彩盒

How to open a colorbox with specific Id or class?

本文关键字：ID 何打开      更新时间：2023-09-26

我有以下代码：

<div class="hidden">
  <div id="deletePopContent" class="c-popup">
    <h2 class="c-popup-header">Delete Practice Sheet</h2>
    <div class="c-content">         
      <h3>Are you sure to delete this practice sheet?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div>
  </div>
</div>


$(document).ready(function(){ 
$(document).on('click', '.edit_user_transaction_status', function (e) { 
    e.preventDefault();
      $.colorbox.close();
     //for confirmation that status change
    var ans=confirm("Are you sure to change status?");
    if(!ans) {
        return false;
    }
    var post_url           = $(this).attr('value');
    var transaction_status_update = $('#transaction_status_update').val();     
    $.ajax({
      type: "POST",
      url: post_url+"&transaction_status_update="+transaction_status_update,
      data:$('#transaction_form').serialize(),
      dataType: 'json',  
      success: function(data) {           
        var error = data.login_error;
        $(".ui-widget-content").dialog("close");
        //This variables use for display title and success massage of transaction update          
      var dialog_title   = data.title;              
      var dialog_message = data.success_massage; 
      //This get link where want to rerdirect
      var redirect_link  = data.href;       
      alert(redirect_link);
      /*var $dialog = $("<div class='ui-state-success'></div>")
                    .html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
                    .dialog({
                  autoOpen: false,
                  modal:true,
                  title: dialog_title,
                  width: 500,
                  height: 80,
        close:  function(){                   
        document.location.href =redirect_link;
        }        
        });*/         
          /*$dialog.dialog('open');*/ 
          document.location.href =redirect_link;
          $.colorbox({inline:true, width:666});
         }          
      });
   });
});

你需要使用href属性，比如：

$.colorbox({
   inline:true, 
   href: "#deletePopContent",
   width:666
});

您正在通过以下方式重定向：

document.location.href =redirect_link; <-- remove this
$.colorbox({inline:true, width:666, href: "#deletePopContent"});

所以只需删除它，它应该可以工作

您可以使用 Colorbox onClosed事件，以便在关闭 ColorBPX 弹出窗口后重定向，如下所示：

$.colorbox({
    inline:true, 
    href: "#deletePopContent",
    width:666,
    onClosed: function() {
       window.location.href = redirect_link;
    }
});
相关文章：