jquery - 如何在选中复选框时填充弹出窗口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
                 });
             }
         });