[英]How can i achieve the these with Javascript / Jquery?
I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. 我想当我单击第一个图片上的“问题”按钮时,第二个图片中的表单出现并且该按钮被隐藏,并且当我单击第二个图片中的表单左上角的(X)时,我想关闭窗体和问题按钮再次出现。 How can i achieve that using Javascript or Jquery or any possible method. 我如何使用Javascript或Jquery或任何可能的方法来实现。
<script type="text/javascript"> $(function(){ var button = document.getElementById("info"); var myDiv = document.getElementById("myDiv"); function show() { myDiv.style.visibility = "visible"; } function hide() { myDiv.style.visibility = "hidden"; } function toggle() { if (myDiv.style.visibility === "hidden") { show(); } else { hide(); } } hide(); button.addEventListener("click", toggle, false); }); </script>
<div class="container"> <div id="myDiv"> <button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span> </button> <p>QUESTION</p> <form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\\nAre you sure?");"> <span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br> <span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br> <span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br> <span class="boxinfo">About</span> <select name="extensionField_ccxqueuetag" id="boxinfo"><br> <option value="Chat_Csq23"></option> </select><br> <input type="submit" value="SUBMIT" id="boxbuton"> <input type="hidden" name="author" value="Customer"><br> </form> </div> <input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton"> </div>
You almost got it, just need to make a few changes: 您几乎做到了,只需要进行一些更改:
Add an Id for the xButton 为xButton添加一个ID
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">×</span>
</button>
Remove onclick in the html Question button 删除html Question按钮中的onclick
<input id="info" type="button" value="QUESTION?" class="switchbuton">
Amd add a hanlder for the X button AMD为X按钮添加一个hanlder
$(function(){
var button = document.getElementById("info");
var xButton = document.getElementById("xButton");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
//hidding Question button
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
//showing Question button
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
//handler for the X button
xButton.addEventListener("click", hide, false);
});
Like Carorus said, you're almost there! 就像Carorus所说的,您快到了! Their example uses your code and it's probably best that you check that out and understand it. 他们的示例使用您的代码,最好检查一下并理解它。
If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for. 如果您正在寻找一种jQuery解决方案,那么我会很快将其整合在一起,希望它是您所寻找的。
http://codepen.io/anon/pen/pJJKjZ?editors=101 http://codepen.io/anon/pen/pJJKjZ?editors=101
$("#info").click(function(){
show()
});
$(".close").click(function(){
hide();
});
var show = function(){
$("#myDiv").css('visibility', 'visible');
$("#info").css('visibility','hidden');
}
var hide = function(){
$("#myDiv").css('visibility', 'hidden');
$("#info").css('visibility','visible');
}
In jQuery you can do it like below. 在jQuery中,您可以像下面这样进行操作。 You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine. 您甚至可以缩短代码,使用类来显示/隐藏更大的范围,但这很好。
function showForm() { $('#myform').show(); $('#myClose').show(); $("#info").hide(); } function hideForm() { $('#myform').hide(); $('#myClose').hide(); $("#info").show(); } $(function() { $('#info').click(function() { showForm(); }); $('#myClose').click(function() { hideForm(); }); hideForm(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div id="myDiv"> <button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span> </button> <p id="q">QUESTION</p> <form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\\nAre you sure?");"> <span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"> <br> <span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"> <br> <span class="box3">Теlephone</span> <input type="text" name="extensionField_PhoneNumber" id="box3"> <br> <span class="boxinfo">About</span> <select name="extensionField_ccxqueuetag" id="boxinfo"> <br> <option value="Chat_Csq23"></option> </select> <br> <input type="submit" value="SUBMIT" id="boxbuton"> <input type="hidden" name="author" value="Customer"> <br> </form> </div> <input id="info" type="button" value="QUESTION?" class="switchbuton"> </div>
Your already using JQuery, so you can handle both buttons with 1 line of code... 您已经在使用JQuery,因此您可以用一行代码来处理两个按钮...
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
$('.button').click(function() { toggle(); });
});
And update your HTML to include a secondary class on your buttons, and remove the onClick attribute... 并更新您的HTML,以在按钮上包含辅助类,并删除onClick属性...
<div class="container">
<div id="myDiv">
<button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>
Html Code: HTML代码:
<div class="container">
<div id="myDiv">
<button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"><br/><br/>
<span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"><br/><br/>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br/><br/>
<input type="submit" value="SUBMIT" id="boxbuton"><br/>
<input type="hidden" name="author" value="Customer"><br/>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
js Code js代码
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
$("#hide").click(function(){
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
});
hide();
button.addEventListener("click", toggle, false);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.