HTML-CSS响应式滑动反馈表
[英]Html-css responsive sliding Feedback Form
问题描述
Slinding反馈表目前没有响应。 我已经在电话上对其进行了测试，并且文本显示在屏幕上。 我将CSS ＃mrova-feedback更改为： max-with：90％; 还是行不通。 我已经尝试了几乎所有内容，但我的问题是我无法使其响应。 我究竟做错了什么？ 有什么想法吗？
(function($) { $.fn.vAlign = function() { return this.each(function(i) { var h = $(this).height(); var oh = $(this).outerHeight(); var mt = (h + (oh - h)) / 2; $(this).css("margin-top", "-" + mt + "px"); $(this).css("top", "50%"); }); }; $.fn.toggleClick = function() { var functions = arguments; return this.click(function() { var iteration = $(this).data('iteration') || 0; functions[iteration].apply(this, arguments); iteration = (iteration + 1) % functions.length; $(this).data('iteration', iteration); }); }; })(jQuery); $(window).load(function() { //cache $img_control = $("#mrova-img-control"); $mrova_feedback = $('#mrova-feedback'); $mrova_contactform = $('#mrova-contactform'); //setback to block state and vertical align to center $mrova_feedback.vAlign() .css({ 'display': 'block', 'height': $mrova_feedback.outerHeight() }); //Aligning feedback button to center with the parent div $img_control.vAlign() //animate the form .toggleClick(function() { $mrova_feedback.animate({ 'right': '-2px' }, 1000); }, function() { $mrova_feedback.animate({ 'right': '-' + $mrova_feedback.outerWidth() }, 1000); }); //Form handling $('#mrova-sendbutton').click(function() { var url = 'send.php'; var error = 0; $('.required', $mrova_contactform).each(function(i) { if ($(this).val() === '') { error++; } }); // each if (error > 0) { alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.'); } else { $str = $mrova_contactform.serialize(); //submit the form $.ajax({ type: "GET", url: url, data: $str, success: function(data) { if (data == 'success') { // show thank you $('#mrova-contact-thankyou').show(); $mrova_contactform.hide(); } else { alert('Unable to send your message. Please try again.'); } } }); //$.ajax } return false; }); });
label { display: block; padding-bottom: 5px; margin-top: 20px; } #mrova-feedback { display: hidden; width: 420px; position: fixed; right: -462px; border: 1px solid #3cb58c; padding: 8px 20px; background-color: #fff; } #mrova-contactform ul { margin: 0; padding: 0; } #mrova-contactform input, #mrova-contactform textarea { width: 400px; padding: 10px; border: 1px solid #ccc; } #mrova-contactform ul li { list-style: none; padding-bottom: 20px; } #mrova-img-control { cursor: pointer; position: absolute; left: -52px; width: 52px; background: transparent url('feedback_buttons/feedback.jpg'); height: 168px; } #mrova-contactform #mrova-sendbutton { width: 60px; background: #db4f4a; color: #fff; cursor: pointer; padding: 5px 10px; border: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Feedback Form Demo </title> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <!-- Files For mRova Feedback Form [Dependency: jQuery] --> <script src="mrova-feedback-form.js" type="text/javascript"></script> <link rel="stylesheet" href="mrova-feedback-form.css" type="text/css" /> <!-- END --> <!-- Just For Demo --> <style type="text/css"> html, body { padding: 0; margin: 0; height: 100%; } body { background-color: #f2f2f2; font-family: helvetica, arial, tahoma, verdana, sans-serif; } h1 { text-align: center; margin-top: 40px; color: #333; } </style> <!-- END --> </head> <body> <h1>Free Feedback Form</h1> <!--Feedback Form HTML START --> <div id="mrova-feedback"> <div id="mrova-contact-thankyou" style="display: none;"> Thank you. We'hv received your feedback. </div> <div id="mrova-form"> <form id="mrova-contactform" action="#" method="post"> <ul> <li> <label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value=""> </li> <li> <label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value=""> </li> <li> <label for="mrova-message">Message*</label> <textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea> </li> </ul> <input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton"> </form> </div> <div id="mrova-img-control"></div> </div> <!-- Feedback Form HTML END --> </body> </html>
1 个解决方案
解决方案1
0 2018-07-14 15:27:26
许多事情是错误的。 我调整了您的代码并对其进行了改进。
该编辑仅在您的HTML和CSS上进行。
* { box-sizing: border-box; } body{ background-color: #f2f2f2; font-family: helvetica,arial,tahoma,verdana,sans-serif; } h1{ text-align: center; margin-top: 40px; color: #333; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #db4f4a; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; /*background-color: #f2f2f2;*/ padding: 20px; display: hidden; /*width: 420px;*/ /*position: fixed;*/ /*right: -462px;*/ border: 1px solid #3cb58c; /*padding: 8px 20px;*/ background-color: #fff; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <h1>ReFree Feedback Form</h1> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">First Name*</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Your name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Last Name*</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="message">Message*</label> </div> <div class="col-75"> <textarea id="message" name="message" placeholder="Write youre message.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div> </body> </html>
好吧，忘记我的HTML和CSS代码
该脚本中的问题：
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
修改后的脚本：
您必须更改'right': '-2px' 。 我认为-120非常合适，尝试一下并告诉我结果。
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-120px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
不要忘记此标记以使页面响应：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
该标签应位于<head>
Html-Css 图像拉伸
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.