模式框+复选框+ cookie [英] Modal box + checkbox + cookie

问题描述

我想达到以下效果：

• 在首页加载时，显示模式框


• 在模式框中，显示一个包含单个强制性复选框的表单


• 在选中复选框后，点击提交并关闭模式框，转到首页




• 在用户返回首页时，如果他们选中了复选框，
  模式框将不会显示

我一直在这个地方：

http://dev.iceburg.net/jquery/jqModal

在我可以得到模态框显示页面加载，但我不能解决如何获取表单，使复选框是强制性的，并关闭框。我也不知道在设置cookie时从哪里开始。

任何指针都会非常感激。

感谢

编辑：包含代码：

Index.html - 在网页加载时显示模式框

  $（）。ready（function（）{
 $（'＃ex2' ）.jqm（{modal：'true'，ajax：'2.html'，trigger：'a.ex2trigger'}）; 
 
 setTimeout（$（'＃ex2'）。jqmShow ，2000）; 
 
}）; 
  

2.html - 通过ajax加载的模态框内容

  function validate（frm）{
 if（frm.checkbox.checked == false）
 {
 alert条款和条件。）; 
 return false; 
} 
} 
 
 
< form action =method =POSTonSubmit =return validate（form）; name =form> 
< input type =checkboxname =checkboxid =checkboxvalue =1>& nbsp;我特此同意所有条款及细则< / a> 
< input type =submitvalue =Submit> 
< / form> 
  

解决方案

加载jquery cookie插件以允许设置/读取Cookie： http://plugins.jquery.com/project/cookie
然后..这样下面这样。未验证，但你得到想法

index.html：

  $（）。ready（function（）{
 if（！$。cookie（'agreed_to_terms'））
 {
 $（'＃ex2'）。jqm（{modal：'true '; ajax：'2.html'，trigger：'a.ex2trigger'}）; 
 $（'＃ex2'）。jqmShow（）; 
} 
} 
   
 
 
 
 2.html：
  $（）。ready（function（）
 {
 $（'＃agreeFrm'）。submit（function（e）
 {
 e。 preventDefault（）; 
 
 if（$（this）.find（'input [name = checkbox]'）。is（'：checked'））
 {
 $。 cookie（'agreed_to_terms'，'1'，{path：'/'，expires：999999}）; 
 $（'＃ex2'）。jqmHide（）; 
} 
} ; 
}）; 
 
< form id =agreeFrmaction =method =POSTname =form> 
< input type =checkboxname =checkboxid =checkboxvalue =1>& nbsp;我特此同意所有条款及细则< / a> 
< input type =submitvalue =Submit> 
< / form> 
  
 
I would like to achieve the following:


On homepage load, display modal box
Within modal box, display a form with a single mandatory checkbox
On checking the checkbox, hit submit and close the modal box, proceed to homepage
Remember this checkbox tick preference using a cookie
On a users return to the homepage, if they have checked the checkbox,
the modal box won't display


I've been getting somewhere with this:

http://dev.iceburg.net/jquery/jqModal

In that I can get the modal box displaying on page load, but I can't work out how to get the form to make the checkbox mandatory and close the box. I also don't know where to start when setting a cookie.

Any pointers would be much appreciated.

Thanks

EDIT: to include code:

Index.html - to display modal box on page load
$().ready(function() {
  $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });

    setTimeout($('#ex2').jqmShow(),2000); 

});
2.html - modal box content loaded via ajax
function validate(frm) {
        if (frm.checkbox.checked==false)
    {
        alert("Please agree to our Terms and Conditions.");
        return false;
    }
}


<form action="" method="POST" onSubmit="return validate(form);" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>

解决方案
Load the jquery cookie plugin to allow to set/read cookies: http://plugins.jquery.com/project/cookie
then.. something like this below. Untested, but you get the idea

index.html:
$().ready(function() {
    if (!$.cookie('agreed_to_terms'))
    {
        $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });
        $('#ex2').jqmShow();    
    }
});
2.html:
$().ready(function()
{
    $('#agreeFrm').submit(function(e)
    {
        e.preventDefault();

        if ($(this).find('input[name=checkbox]').is(':checked'))
        {
            $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 });
            $('#ex2').jqmHide(); 
        }
    });
});

<form id="agreeFrm" action="" method="POST" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>


                        
这篇关于模式框+复选框+ cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！