Caixa modal + caixa de seleção + cookie
-
05-07-2019 - |
Pergunta
Eu gostaria de alcançar o seguinte:
- Na carga da página inicial, exibir caixa modal
- Dentro da caixa modal, exiba um formulário com uma única caixa de seleção obrigatória
- Ao verificar a caixa de seleção, pressione e feche a caixa modal, prossiga para a página inicial
- Lembre -se desta preferência de tick de caixa de seleção usando um cookie
- Nos usuários retornam à página inicial, se tiveram verificação da caixa de seleção, a caixa modal não será exibida
Eu tenho chegado a algum lugar com isso:
http://dev.iceburg.net/jquery/jqmodal
Por isso, posso obter a caixa modal exibida na página da página, mas não consigo descobrir como obter o formulário para tornar a caixa de seleção obrigatória e fechar a caixa. Também não sei por onde começar ao definir um cookie.
Qualquer dica será muito apreciada.
Obrigado
Editar: para incluir código:
Index.html - para exibir a caixa modal na página Carregar
$().ready(function() {
$('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });
setTimeout($('#ex2').jqmShow(),2000);
});
2.html - Conteúdo da caixa modal carregada 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"> I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>
Solução
Carregue o plug -in JQuery Cookie para permitir definir/ler cookies: http://plugins.jquery.com/project/cookieEntão .. algo assim abaixo. Não testado, mas você entendeu a ideia
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"> I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>
Outras dicas
Eu usei um plug -in jQuery há pouco tempo chamado simlemodal
Fiquei muito impressionado com o quão fácil era. No modal, eu tinha várias caixas de seleção e, para transportar os valores das caixas de seleção de volta à página em que o modal estava ligado depois que um botão de envio foi atingido.
Todas as informações e demos estão no Página inicial simplemodal
Funciona, finalmente! Eu estava perdendo o retorno de chamada quando o cookie existe e esses tiques '' em torno do valor do cookie. Aqui está como se parece. Por favor, deixe -me saber se há algum erro óbvio. (Muito obrigado pelo seu apoio)
function confirm(msg,callback) {
$('#confirm')
.jqmShow()
.find('p.jqmConfirmMsg')
.html(msg)
.end()
.find(':submit:visible')
.click(function(){
if(this.value == 'Proceed'){
$.cookie("agreed_to_terms", '1', { expires : 1, path: '/' }); //set cookie, expires in 365 days
(typeof callback == 'string') ?
window.location.href = callback :
callback();
}
$('#confirm').jqmHide();
});
}
$().ready(function() {
$('#confirm').jqm({overlay: 88, modal: 'true', trigger: false});
// trigger a confirm whenever links of class alert are pressed.
$('a.confirm').click(function() {
if ($.cookie('agreed_to_terms') == '1'){window.location.href = callback =
callback()
//they already have cookie set
}else{
confirm('About to visit: '+this.href+' !',this.href);
}
return false;
});
});// JavaScript Document