[英]get value for a cookie from a bootrap modal with js
I'm trying to create a modal that has 2 options: yes or no. 我正在尝试创建具有2个选项的模态:是或否。 When a user selects no I will create a condition if
value=no
then do not display modal. 当用户选择否时,如果
value=no
no,我将创建一个条件,然后不显示模式。
The issue is that I cannot accomplish it. 问题是我无法完成它。 If is answer is yes I can manipulate the info, I need to display a modal asking a question, get the users answer and based on this and do something every 15 days.
如果答案是肯定的,我可以操纵信息,则需要显示一个模态问题,获取用户答案,并根据此信息每15天执行一次操作。
my code is currently not working properly 我的代码当前无法正常工作
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
$('#hewant').on('click', function() {
var valyes = $(this).text();
console.log(valyes);
});
$('#hedont').on('click', function() {
var valno = $(this).text();
console.log(valno);
});
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
$("#myModalcashout").modal();
user = "testing me";
if (user != "" && user != null) {
setCookie("username", user, 15);
}
}
}
</script>
<body onload="checkCookie()">
<div class="modal fade" id="myModalcashout">
<div class="modal-dialog">
<!-- for modal to active manually->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p style="text-align:center">test</p>
<p style="text-align:center">question</p>
<p style="text-align:center">for u</p>
<div id="hewant" value="yes"> yes i am </div>
<div id="hedont" value="no"> no i dont</div>
</div>
</div>
</div>
</div>
</body>
I restructured your code for you. 我为您重组了代码。 For starters you only need 1 listener for both buttons, which can be assigned using
class
on the buttons in the modal (which I changed from div
to button
tags. 对于初学者,两个按钮都只需要1个侦听器,可以使用模式中按钮上的
class
来分配监听器(我从div
更改为button
标签。
Note : "Run this code snippet" will not work in this sand boxed environment in regards to cookie manipulation so you will have to test this yourself. 注意 :关于cookie操作,“运行此代码段”在此沙盒环境中不起作用,因此您必须自己进行测试。
There is now a showModal() function that you will call on load that is responsible for showing your modal and attaching a click listener to both buttons on the modal. 现在有一个showModal()函数,您将在加载时调用该函数,该函数负责显示模态并将单击侦听器附加到模态上的两个按钮。
When the user clicks yes or no on the modal we get their answer and pass it to checkCookie()
function which does as you ask. 当用户在模态上单击“是”或“否”时,我们将得到他们的答案,并将其传递给您所要求的
checkCookie()
函数。
I replaced your create and set cookie functions with ones that are tested and work (also added eraseCookie()) there is a great explanation about all 3 functions Here 我换成你创建和设置cookie的功能与经过测试和工作(也加入eraseCookie())的人有所有3个功能很好的解释这里
showModal(); function showModal() { // only show modal if cookie for the user is null var user = readCookie("username"); if (user != null) { alert("Welcome again " + user); } else { user = "testing me"; $("#myModalcashout").modal(); // add listener on buttons $('.modalButton').on('click', function() { $('#myModalcashout').modal().hide(); var answer = $(this).val(); console.log(answer); // create a cookie with the users answer to the modal createCookie("username", answer, 15); }); } } function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="modal fade" id="myModalcashout"> <div class="modal-dialog"> <!-- for modal to active manually-> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <p style="text-align:center">test</p> <p style="text-align:center">question</p> <p style="text-align:center">for u</p> <button class="modalButton" value="yes"> yes i am </button> <button class="modalButton" value="no"> no i dont</button> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.