Question

您好我正在使用Fancy box加载一些内容，当点击一个按钮时，花式框应该关闭。

这是我的代码：

function confirmation(){
        var htmlStr = '<div class="form"><form:form id="confirmBox" method="POST" action="tagging">'
        + '<label>Do you want to Map Or Tag? </label>'
        + '<br>'
        + '<br>'
        + '<br>'
        + '<input type="button" name="confMapBtn" id="confMapBtn" value="MAP" class="ui-button ui-widget ui-corner-all">'

        + '<input type="button" name="confTagBtn" id="confTagBtn" value="TAG" class="ui-button ui-widget ui-corner-all">'
        + '</form:form></div>';
    $.fancybox.open(htmlStr, {

    'width' : 950,
    'height' : 1100,
    'autoScale' : false,
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'hideOnContentClick' : false,
    'afterLoad': function(){

        $("#confMapBtn").click(function(){
            if($(this).data('clicked', true)){
                mapping();
            }
        });

        $("#confTagBtn").click(function(){
            if($(this).data('clicked', true)){
                tagging();
            }
        });
    }
    });
    }

注意：每当点击一个按钮时，它会进入某个功能，但在此之前应关闭Fancy框。

更新：当从花式框上方点击按钮时，会打开另一个花式框，但不要介意它，在显示按钮点击后出现的花式框之前，应关闭当前的花式框。

感谢帮助，谢谢

Answer 1

尝试此代码：使用$.fancybox.close();或者会有一个名为

的类

fancybox-close打开fancybox时，只需触发点击即可。

$("#confMapBtn").click(function(){
     if($(this).data('clicked', true)){
            mapping();
            $(".fancybox-close").trigger("click");
        }


}

或

$("#confMapBtn").click(function(){ if($(this).data('clicked', true)){ mapping(); $.fancybox.close(); } }

Answer 2

只需使用$.fancybox.close();，即documented in the plugin's readme。您可以在点击事件中调用它，也可以在mapping()或tagging()函数中调用它。

例如，您可以这样做：

$("#confMapBtn").click(function() {
  if ($(this).data('clicked', true)) {
    mapping();
    $.fancybox.close();
  }
});

$("#confTagBtn").click(function() {
  if ($(this).data('clicked', true)) {
    tagging();
    $.fancybox.close();
  }
});

这是一个概念验证示例：

$(function() {
  // Dummy functions to check that button click is triggered
  function mapping() {
    console.log('Mapping');
  };
  function tagging() {
    console.log('Tagging');
  };
  
  // Original confirmation function
  function confirmation() {
    var htmlStr = '<div class="form"><form:form id="confirmBox" method="POST" action="tagging">' +
      '<label>Do you want to Map Or Tag? </label>' +
      '<br>' +
      '<br>' +
      '<br>' +
      '<input type="button" name="confMapBtn" id="confMapBtn" value="MAP" class="ui-button ui-widget ui-corner-all">'

      +
      '<input type="button" name="confTagBtn" id="confTagBtn" value="TAG" class="ui-button ui-widget ui-corner-all">' +
      '</form:form></div>';
 
    $.fancybox.open(htmlStr, {

      'width': 950,
      'height': 1100,
      'autoScale': false,
      'transitionIn': 'none',
      'transitionOut': 'none',
      'hideOnContentClick': false,
      'afterLoad': function() {

        $("#confMapBtn").click(function() {
          if ($(this).data('clicked', true)) {
            mapping();
            $.fancybox.close();
          }
        });

        $("#confTagBtn").click(function() {
          if ($(this).data('clicked', true)) {
            tagging();
            $.fancybox.close();
          }
        });
      }
    });
  }
  
  confirmation();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>

Answer 3

试试这个： 。父$ fancybox.close（）;

请参阅Fancybox API documentation。

在jquery中单击按钮后如何关闭花式框？

3 个答案: