如何在选中复选框jquery时填充弹出窗口？

Question

我有一个数据表，并且有n个复选框，每当我点击一个复选框时，我需要弹出一些X内容。

这是我的代码

$("input:checkbox").click(function () {

             if ($(this).is(':checked')) {

                 var htmlStr = '<div class="form"><form>First Name:<input type="text" maxlength="20"></input><br />Last Name:<input type="text" maxlength="20"></input></form></div>';

                 $.fancybox(htmlStr, {
                     'width': 950,
                     'height': 1100,
                     'autoScale': false,
                     'transitionIn': 'none',
                     'transitionOut': 'none',
                     'hideOnContentClick': false
                 });
             }
         });

浏览器控制台出错

我使用的fancybox库是

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

我不知道问题出在哪里， 帮帮我吧。 感谢

Answer 1

你必须调用花式框的开放功能。

这是一个解决方案。如果有效，请告诉我。在这里，您可以测试https://codepen.io/anon/pen/mwNgqX

$("input:checkbox").click(function () {
             if ($(this).is(':checked')) {
                 var htmlStr = '<div class="form"><form>First Name:<input type="text" maxlength="20"></input><br />Last Name:<input type="text" maxlength="20"></input></form></div>';

                 $.fancybox.open(htmlStr, {
                     'width': 950,
                     'height': 1100,
                     'autoScale': false,
                     'transitionIn': 'none',
                     'transitionOut': 'none',
                     'hideOnContentClick': false
                 });
             }
         });