The close function should show an X letter as span when you click the Contact Us button, but it doesn't show up. Can you help me? This is the codepen: https://codepen.io/anon/pen/QmqNKG
Thank you...
HTML:
<div id="contact">
<form>
<p><input type="text" name="name" placeholder="Email"></p>
<p><textarea name="name" placeholder="Message"></textarea></p>
<p><input type="submit" value="Send"></p>
</form>
</div>
CSS:
#contact{width:550px;margin:40px auto;}
.js #contact{display:none;position:absolute;top:81px;background:#ccc;width:550px;}
.js #contact form {text-align:center;}
JS:
(function(){
$('html').addClass('js');
var container = $('#contact');
var contactForm = {
init: function() {
$('<button></button>', {
text: 'Contact Us'
})
.insertAfter(container)
.on('click', this.show)
},
show: function() {
contactForm.close;
container.show();
},
hide: function() {
container.hide();
},
close: function() {
$('<span><span>', {
text: 'X',
class: 'close'
})
.prependTo(container)
.on('click', contactForm.hide)
}
};
contactForm.init();
}());
答案 0 :(得分:0)
You need to close span tag properly in close function and call contactForm.close() function in show function. Take a look:
show: function() {
contactForm.close();
container.show();
},
hide: function() {
container.hide();
// remove x span
$('.close').remove();
},
close: function() {
$('<span></span>', {
text: 'x',
class: 'close'
})
.prependTo(container)
.on('click', contactForm.hide)
}
Hope it helps!