支付形式的样式不起作用

时间：2017-06-16 09:38:19

标签： javascript jquery html css

所以我正在制作一个商店页面，我将所有项目形式排序，这样可以正常工作。然后我将一个模态形式放在它的顶部，链接出现在＆＃34;注册＆＃34;按下按钮（稍后将更改该按钮上的措辞）。然后我在网上找到了一张信用卡表格，而且由于某些原因，CSS不想正常工作。

这应该看起来像https://gyazo.com/4aada249199f08dd12690ea0ec0042f4

这就是现在的样子https://gyazo.com/c857e023d5860376c4813651bc260bc0

这是我的项目表单，模式和付款表单的html代码。

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('id01').style.display='block'">Sign 
Up</button></a></li>
</ul>
</div>

<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" 
class="close" title="Close Modal">&times;</span>
<div class="container">
<div class="row">
<!-- You can make it whatever width you want. I'm making it full width
on <= small devices and 4/12 page width on >= medium devices -->
<div class="col-xs-12 col-md-4">


<!-- CREDIT CARD FORM STARTS HERE -->
<div class="panel panel-default credit-card-box">
<div class="panel-heading display-table" >
<div class="row display-tr" >
<h3 class="panel-title display-td" >Payment Details</h3>
<div class="display-td" >                            
<img class="img-responsive pull-right" 
src="http://i76.imgup.net/accepted_c22e0.png">
</div>
</div>                    
</div>
<div class="panel-body">
<form role="form" id="payment-form">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<div class="input-group">
<input 
type="tel"
class="form-control"
name="cardNumber"
placeholder="Valid Card Number"
autocomplete="cc-number"
required autofocus 
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>                            
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span 
class="visible-xs-inline">EXP</span> DATE</label>
<input 
type="tel" 
class="form-control" 
name="cardExpiry"
placeholder="MM / YY"
autocomplete="cc-exp"
required 
/>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="form-group">
<label for="cardCVC">CV CODE</label>
<input 
type="tel" 
class="form-control"
name="cardCVC"
placeholder="CVC"
autocomplete="cc-csc"
required
/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="couponCode">COUPON CODE</label>
<input type="text" class="form-control" name="couponCode" />
</div>
</div>                        
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success btn-lg btn-block" type="submit">Start 
Subscription</button>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
</form>
</div>
</div>            
<!-- CREDIT CARD FORM ENDS HERE -->
</div>
</div>
</form>
</div>

这是所有3个元素的CSS。

/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}

/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}

/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.columns {
    width: 100%;
}
}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}

/* Add padding to container elements */
.container {
padding: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and 
centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens 
*/
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
    width: 100%;
}
}

/* CSS for Credit Card Payment form */
.credit-card-box .panel-title {
display: inline;
font-weight: bold;
}
.credit-card-box .form-control.error {
border-color: red;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
 font-weight: bold;
 color: red;
 padding: 2px 8px;
 margin-top: 2px;
}
.credit-card-box .payment-errors {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.credit-card-box label {
display: block;
}
/* The old "center div vertically" hack */
.credit-card-box .display-table {
display: table;
}
.credit-card-box .display-tr {
display: table-row;
}
.credit-card-box .display-td {
display: table-cell;
vertical-align: middle;
width: 50%;
}
/* Just looks nicer */
.credit-card-box .panel-heading img {
min-width: 180px;
 }

最后这里是支付表格的JS。

var $form = $('#payment-form');
$form.on('submit', payWithStripe);

/* If you're using Stripe for payments */
function payWithStripe(e) {
e.preventDefault();

/* Visual feedback */
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-
pulse"></i>');

var PublishableKey = 'pk_test_b1qXXwATmiaA1VDJ1mOVVO1p'; // Replace with 
your API publishable key
Stripe.setPublishableKey(PublishableKey);

/* Create token */
var expiry = $form.find('[name=cardExpiry]').payment('cardExpiryVal');
var ccData = {
    number: $form.find('[name=cardNumber]').val().replace(/\s/g,''),
    cvc: $form.find('[name=cardCVC]').val(),
    exp_month: expiry.month, 
    exp_year: expiry.year
};

Stripe.card.createToken(ccData, function stripeResponseHandler(status, 
response) {
    if (response.error) {
        /* Visual feedback */
        $form.find('[type=submit]').html('Try again');
        /* Show Stripe errors on the form */
        $form.find('.payment-errors').text(response.error.message);
        $form.find('.payment-errors').closest('.row').show();
    } else {
        /* Visual feedback */
        $form.find('[type=submit]').html('Processing <i class="fa fa-spinner 
fa-pulse"></i>');
        /* Hide Stripe errors on the form */
        $form.find('.payment-errors').closest('.row').hide();
        $form.find('.payment-errors').text("");
        // response contains id and card, which contains additional card 
details            
        console.log(response.id);
        console.log(response.card);
        var token = response.id;
        // AJAX - you would send 'token' to your server here.
        $.post('/account/stripe_card_token', {
                token: token
            })
            // Assign handlers immediately after making the request,
            .done(function(data, textStatus, jqXHR) {
                $form.find('[type=submit]').html('Payment successful <i 
class="fa fa-check"></i>').prop('disabled', true);
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                $form.find('[type=submit]').html('There was a 
problem').removeClass('success').addClass('error');
                /* Show Stripe errors on the form */
                $form.find('.payment-errors').text('Try refreshing the page 
and trying again.');
                $form.find('.payment-errors').closest('.row').show();
            });
    }
});
}
/* Fancy restrictive input formatting via jQuery.payment library*/
 $('input[name=cardNumber]').payment('formatCardNumber');
 $('input[name=cardCVC]').payment('formatCardCVC');
 $('input[name=cardExpiry').payment('formatCardExpiry');

/* Form validation using Stripe client-side validation helpers */
jQuery.validator.addMethod("cardNumber", function(value, element) {
return this.optional(element) || Stripe.card.validateCardNumber(value);
}, "Please specify a valid credit card number.");

jQuery.validator.addMethod("cardExpiry", function(value, element) {    
/* Parsing month/year uses jQuery.payment library */
value = $.payment.cardExpiryVal(value);
return this.optional(element) || Stripe.card.validateExpiry(value.month, 
value.year);
}, "Invalid expiration date.");

jQuery.validator.addMethod("cardCVC", function(value, element) {
return this.optional(element) || Stripe.card.validateCVC(value);
}, "Invalid CVC.");

validator = $form.validate({
rules: {
    cardNumber: {
        required: true,
        cardNumber: true            
    },
    cardExpiry: {
        required: true,
        cardExpiry: true
    },
    cardCVC: {
        required: true,
        cardCVC: true
    }
},
highlight: function(element) {
    $(element).closest('.form-
control').removeClass('success').addClass('error');
},
unhighlight: function(element) {
    $(element).closest('.form-
control').removeClass('error').addClass('success');
},
errorPlacement: function(error, element) {
    $(element).closest('.form-group').append(error);
}
});

 paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") &&
    $form.find('[name=cardExpiry]').hasClass("success") &&
    $form.find('[name=cardCVC]').val().length > 1) {
    return true;
} else {
    return false;
}
}

$form.find('[type=submit]').prop('disabled', true);
var readyInterval = setInterval(function() {
if (paymentFormReady()) {
    $form.find('[type=submit]').prop('disabled', false);
    clearInterval(readyInterval);
}
}, 250);

2 个答案:

答案 0 :(得分：0)

首先，您需要清理一些不匹配的结束标记。 dummy(5); // Print "Generic: 5" dummy(5.); // Print "Floating point: 5" dummy("lol"); // Print "Generic: lol" 中的</a>包含您的＆＃34;注册＆＃34;按钮，例如...... 

<li>

然后，第二个<li class="grey"> <button onclick="document.getElementById('id01').style.display='block'">Sign Up</button> </a> <!-- remove this --> </li> ...... 

</form>

其次，可能与您的样式问题更直接相关，根据您的CSS，看起来</form> </div> </div> <!-- CREDIT CARD FORM ENDS HERE --> </div> </div> </form> <!-- it looks like this one may be unneccessary --> </div> 类元素期望具有类.modal的子元素呈现居中，轻 - 信用卡表格周围的灰盒子。

＆＃13;
＆＃13; 
.modal-content
＆＃13; 
/* Create three columns of equal width */

.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}


/* Style the list */

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}


/* Add shadows on hover */

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}


/* Pricing header */

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}


/* List items */

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}


/* Grey list item */

.price .grey {
  background-color: #eee;
  font-size: 20px;
}


/* The "Sign Up" button */

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}


/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}


/* Full-width input fields */

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


/* Set a style for all buttons */

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


/* Extra styles for the cancel button */

.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}


/* Float cancel and signup buttons and add an equal width */

.cancelbtn,
.signupbtn {
  float: left;
  width: 50%;
}


/* Add padding to container elements */

.container {
  padding: 16px;
}


/* The Modal (background) */

.modal {
  /* display: none; */ /* commented out to show modal without JS */
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  padding-top: 60px;
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and 
centered */
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button (x) */

.close {
  position: absolute;
  right: 35px;
  top: 15px;
  color: #000;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}


/* Clear floats */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Change styles for cancel button and signup button on extra small screens 
*/

@media screen and (max-width: 300px) {
  .cancelbtn,
  .signupbtn {
    width: 100%;
  }
}


/* CSS for Credit Card Payment form */

.credit-card-box .panel-title {
  display: inline;
  font-weight: bold;
}

.credit-card-box .form-control.error {
  border-color: red;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

.credit-card-box label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}

.credit-card-box .payment-errors {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}

.credit-card-box label {
  display: block;
}


/* The old "center div vertically" hack */

.credit-card-box .display-table {
  display: table;
}

.credit-card-box .display-tr {
  display: table-row;
}

.credit-card-box .display-td {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}


/* Just looks nicer */

.credit-card-box .panel-heading img {
  min-width: 180px;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

确保您的boorstrap链接正常工作，并尝试使用col-sm-12而不是col-xs-12。 下面给出的代码包含模态内容的更改。

.columns {
            float: left;
            width: 33.3%;
            padding: 8px;
        }

        /* Style the list */
        .price {
            list-style-type: none;
            border: 1px solid #eee;
            margin: 0;
            padding: 0;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

            /* Add shadows on hover */
            .price:hover {
                box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
            }

            /* Pricing header */
            .price .header {
                background-color: #111;
                color: white;
                font-size: 25px;
            }

            /* List items */
            .price li {
                border-bottom: 1px solid #eee;
                padding: 20px;
                text-align: center;
            }

            /* Grey list item */
            .price .grey {
                background-color: #eee;
                font-size: 20px;
            }

        /* The "Sign Up" button */
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 25px;
            text-align: center;
            text-decoration: none;
            font-size: 18px;
        }

        /* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
        @media only screen and (max-width: 600px) {
            .columns {
                width: 100%;
            }
        }

        /* Full-width input fields */
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        /* Set a style for all buttons */
        .columns button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        /* Float cancel and signup buttons and add an equal width */
        .cancelbtn, .signupbtn {
            float: left;
            width: 50%;
        }

        /* Change styles for cancel button and signup button on extra small screens
*/
        @media screen and (max-width: 300px) {
            .cancelbtn, .signupbtn {
                width: 100%;
            }
        }

        /* CSS for Credit Card Payment form */
        .credit-card-box .panel-title {
            display: inline;
            font-weight: bold;
        }

        .credit-card-box .form-control.error {
            border-color: red;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
        }

        .credit-card-box label.error {
            font-weight: bold;
            color: red;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .credit-card-box .payment-errors {
            font-weight: bold;
            color: red;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .credit-card-box label {
            display: block;
        }
        /* The old "center div vertically" hack */
        .credit-card-box .display-table {
            display: table;
        }

        .credit-card-box .display-tr {
            display: table-row;
        }
      .credit-card-box {
            vertical-align: middle;
            width: 100%;
        }
        /* Just looks nicer */
        .credit-card-box .panel-heading img {
            min-width: 180px;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
        <!-- You can make it whatever width you want. I'm making it full width
        on <= small devices and 4/12 page width on >= medium devices -->
        <div class="col-xs-12 col-sm-4">
            <!-- CREDIT CARD FORM STARTS HERE -->
          <div class="panel panel-default credit-card-box">
              
              <div class="panel-heading">
                      <div class="row">
                    <div class="col-sm-4">
                      <h5 class="panel-title">Payment Details</h5>
                    </div>
                    
                    <div class="col-sm-8">
                        <img class="img-responsive" src="http://i76.imgup.net/accepted_c22e0.png">
                    </div>
                  </div>
              </div>
              <div class="panel-body">
                  <form role="form" id="payment-form">
                      <div class="row">
                          <div class="col-xs-12">
                              <div class="form-group">
                                  <label for="cardNumber">CARD NUMBER</label>
                                  <div class="input-group">
                                      <input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" autocomplete="cc-number" required="" autofocus="">
                                      <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-xs-7 col-md-7">
                              <div class="form-group">
                                  <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
                                  <input type="tel" class="form-control" name="cardExpiry" placeholder="MM / YY" autocomplete="cc-exp" required="">
                              </div>
                          </div>
                          <div class="col-xs-5 col-md-5 pull-right">
                              <div class="form-group">
                                  <label for="cardCVC">CV CODE</label>
                                  <input type="tel" class="form-control" name="cardCVC" placeholder="CVC" autocomplete="cc-csc" required="">
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-xs-12">
                              <div class="form-group">
                                  <label for="couponCode">COUPON CODE</label>
                                  <input type="text" class="form-control" name="couponCode">
                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-xs-12">
                              <button class="btn btn-success btn-lg btn-block" type="submit">
                                  Start
                                  Subscription
                              </button>
                          </div>
                      </div>
                      <div class="row" style="display:none;">
                          <div class="col-xs-12">
                              <p class="payment-errors"></p>
                          </div>
                      </div>
                  </form>
              </div>
          </div>
          <!-- CREDIT CARD FORM ENDS HERE -->
    </div>
  </div>

相关问题
最新问题