Question

我想要做的是当用户点击一个复选框时，它会打开带有表单的模态窗口，并且该表单将信息提交给数据库，并在模态窗口中显示谢谢。

我正在使用以下模态窗口： http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/

如何通过选中复选框而不是单击链接来启动模态窗口？

非常感谢任何建议。

谢谢！

更新

<input type="checkbox" id="check_open" />Open</div>

<!-- hidden inline form -->
<div id="inline">
<h2>Send us a Message</h2>
<form id="contact" action="#" method="post" name="contact"><label for="email">Your E-mail</label>
    <input id="email" class="txt" type="email" name="email" />

    <label for="msg">Enter a Message</label>
    <textarea id="msg" class="txtarea" name="msg"></textarea>

    <button id="send">Send E-mail</button></form></div>

<!-- basic fancybox setup -->
<script type="text/javascript">
    function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }

    $(document).ready(function() {
        $("#check_open").fancybox();
        $("#contact").submit(function() { return false; });


        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var msgval    = $("#msg").val();
            var msglen    = msgval.length;
            var mailvalid = validateEmail(emailval);

            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }

            if(msglen < 4) {
                $("#msg").addClass("error");
            }
            else if(msglen >= 4){
                $("#msg").removeClass("error");
            }

            if(mailvalid == true && msglen >= 4) {
                // if both validate we attempt to send the e-mail
                // first we hide the submit btn so the user doesnt click twice
                $("#send").replaceWith("<em>sending...</em>");

                $.ajax({
                    type: 'POST',
                    url: 'sendmessage.php',
                    data: $("#contact").serialize(),
                    success: function(data) {
                        if(data == "true") {
                            $("#contact").fadeOut("fast", function(){
                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                setTimeout("$.fancybox.close()", 1000);
                            });
                        }
                    }
                });
            }
        });
    });
</script>

Answer 1

该示例将.fancybox()方法连接到分配了modalbox类的任何内容：

$(".modalbox").fancybox();

如果您希望在单击复选框时启动模式对话框，请将其分配给modalbox类，或者按ID分配，如：

<input type="checkbox" id="check_open" />Open

和

$("#check_open").fancybox();

在document.ready函数中。

有很多例子可以将提交给php脚本的数据存储到数据库中。也许开始here ...

Update将模式窗口与表单提交集成到数据库中

1 个答案: