如果在其中打开另一个fancybox，父级fancybox将关闭

Question

我有一个使用fancybox的弹出窗口。它有不同的按钮。当我尝试单击“编辑”按钮时，它会打开一个对话框（我可以在其中编辑其他名称），但后台中的fancybox会自行关闭，因此我无法访问该父级fancybox。

    <div  id='tempFancyBoxLayerEdit' style="display: none; width:100%; padding:10px">             
    <table class="two columns">
        <tr><h5>Edit Layer Name</h5></tr>
        <tr>
            <td> New Name: 
                <input type ="text" id="txtLayerNameEdit" name="txtLayerNameEdit" path="name" />
                 <span  class="error hidden" id="span-projectname-errors">* required</span>
            </td>
        </tr>
        <tr>
            <td>
                <button id="btnCreate" class="small button" onclick="UpdateLayerName()">Update</button>
            </td>
            <button id="btnCreate" class="small button" onclick="EditMetricName()">edit</button>

            <td>
                <button id="btnCancelMetric" class="small button" onclick="return CloseDiaglog()">Cancel</button>
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </div>

function EditMetricName() {   
    popupDuplicateDialogMetricEdit(); 
}
function popupDuplicateDialogMetricEdit() {
    $("#txtMetricNameEdit").val("");
      $.fancybox({href:'#tempFancyBoxMetricEdit', closeBtn: false, helpers:{overlay: {closeClick:false}}});
    }

function UpdateMetricName() {
  //Check if new Metric name is entered or not.
   var isValid = true;
    var newMetricName = $("#txtMetricNameEdit").val();
    if (newMetricName == null || newMetricName == "") {
    $("#txtMetricNameEdit").focus();
    $("#span-projectname-errors").removeClass("hidden");
   isValid = false;
} 
  else {
     if( newMetricName.indexOf(":") >= 0 || newMetricName.indexOf("\"") >= 0 || newMetricName.indexOf("%") >= 0 ||
         newMetricName.indexOf("?") >= 0 || newMetricName.indexOf("*") >= 0 || newMetricName.indexOf("<") >= 0 
         || newMetricName.indexOf(">") >= 0 || newMetricName.indexOf("|") >= 0) {
         alert("Name of the Metric cannot contain characters such as :, \",?,*,<,>,|,%,or % ");
         isValid = false;
     }
  }

    if(isValid){                
        l_sSelectMetricControl.find(':selected').text($('#txtMetricNameEdit').val());   
        CloseDiaglog();
        UpdateMetricFromGUI();
    }
}

<div  id='tempFancyBoxMetricEdit' style="display: none; width:100%; padding:10px">             
    <table class="two columns">
        <tr><h5>Edit Metric Name</h5></tr>
        <tr>
            <td> New Name: 
                <input type ="text" id="txtMetricNameEdit" name="txtMetricNameEdit" path="name" />
                 <span  class="error hidden" id="span-projectname-errors">* required</span>
            </td>
        </tr>
        <tr>
            <td>
                <button id="btnCreate" class="small button" onclick="UpdateMetricName()">Update</button>
            </td>
            <td>
                <button id="btnCancelMetric" class="small button" onclick="return CloseDiaglog()">Cancel</button>
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </div>