如果复选框处于选中状态，则会弹出一个包含注册页面中HTML内容的fancybox

Question

如果复选框处于选中状态，则会弹出一个包含注册页面中HTML内容的fancybox

我当前的JS代码如下。这个警告基本上是我想要抓取和显示的HTML的占位符。

$("#Register").click(function() {
    if($(this).is(':checked')) {
        alert("This is a fancybox! Register here.")
        $('#CheckoutOptions').fancybox('');
    }
})

HTML代码是：

<form id="CheckoutOptions" name="CheckoutOptions">
    <label class="inline">
    <input type="checkbox" id="Register" name="CheckoutOptions" value="Register">
     Register Account </label>
     <br>
    <label class="inline">
    <input type="checkbox" id="Guest" name="CheckoutOptions" value="Guest">
    Guest Checkout </label>
</form>

在HTML里面将是一个表单，用户可以简单地注册一个帐户。在注册帐户结束时，如果成功，我还想关闭Fancybox并重新加载原始网页。

你也能帮到我吗？

JSfiddle在这里：http://jsfiddle.net/5CS4D/3/

Answer 1

请查看附件中的链接：-它与您想要的完全相同：-

Open Link

你可以在示例中找到源代码。

您也可以尝试以下链接：- http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

Answer 2

您的小提琴没有正确包含js。此外，您还需要告诉fancybox您想要显示什么。我只是将表单html放在一个字符串中，但是您可以随心所欲地获取它。

$("#Register").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
         });
     }
 });

http://jsfiddle.net/dpauz/