與無邊框形式

document.addEventListener('click', function (e) { 
 
    e = e || window.event; 
 
    var target = e.target || e.srcElement; 
 

 
    e.preventDefault(); 
 

 
    if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') { 
 
     if (target.hasAttribute('data-target')) { 
 
      var m_ID = target.getAttribute('data-target'); 
 
      document.getElementById(m_ID).classList.add('open'); 
 
     } 
 
    } 
 

 
    // Close modal window with 'data-dismiss' attribute or when the backdrop is clicked 
 
    if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) { 
 
     var modal = document.querySelector('[class="modal open"]'); 
 
     modal.classList.remove('open'); 
 
    } 
 
}, false);

.modal { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    display: none; 
 
    overflow: auto; 
 
    background-color: #000000; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    z-index: 9999; 
 
} 
 

 
.modal-window { 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
    width: 80%; 
 
    margin: 10% auto; 
 
    padding: 20px; 
 
} 
 

 
.modal-window.small { 
 
    width: 30%; 
 
} 
 

 
.modal-window.large { 
 
    width: 75%; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    color: rgba(0,0,0,0.3); 
 
    height: 30px; 
 
    width: 30px; 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
} 
 

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

 
.open { 
 
    display: block; 
 
} 
 

 

 
.form-group .form-control { 
 
    border: 0; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2)); 
 
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2); 
 
    background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#D2D2D2, #D2D2D2); 
 
    background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2); 
 
    -webkit-background-size: 0 2px, 100% 1px; 
 
    background-size: 0 2px, 100% 1px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom, center -webkit-calc(100% - 1px); 
 
    background-position: center bottom, center calc(100% - 1px); 
 
    background-color: rgba(0, 0, 0, 0); 
 
    -webkit-transition: background 0s ease-out; 
 
    -o-transition: background 0s ease-out; 
 
    transition: background 0s ease-out; 
 
    float: none; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<button class="btn btn-round btn-info1" data-target="modal" data-toggle="modal">DONATE</button> 
 

 
<div id="modal" class="modal"> 
 
       <div class="modal-window"> 
 
        <span class="close" data-dismiss="modal">&times;</span> 
 
        <h2 class="text-center">Bank Details</h2> 
 
        <div class="row"> 
 
         <div class="col-md-6"> 
 
          <p class="text-color"><span class="text-muted">Name of Account:</span> Shyamchi Aai Foundation</p> 
 
          <p class="text-color"><span class="text-muted">Account Number:</span> 913010042120913</p> 
 
          <p class="text-color"><span class="text-muted">IFSC Code:</span> UTIB0000104</p> 
 
          <p class="text-color"><span class="text-muted">Bank Address:</span> Business Square Plot No-57, Mayur Colony, Next To Jog High School, Kothrud</p> 
 
         </div> 
 
         <div class="col-md-6"> 
 
          <p class="text-color"><span class="text-muted">Bank Name:</span> Axis Bank Ltd.</p> 
 
          <p class="text-color"><span class="text-muted">Account type:</span> SB-TRUST/SOCIETY/NGO/GOVT</p> 
 
          <p class="text-color"><span class="text-muted">MICR Code:</span> 411211004</p> 
 
          <p class="text-color"><span class="text-muted">Branch:</span> KOTHRUD</p><br><br> 
 
         </div> 
 
        </div> 
 
        <div class="row text-center"> 
 
         <h2>Donor Details</h2> 
 
         <div class="col-md-12"> 
 
          <form> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="text" class="form-control" placeholder="Name" name="Name"> 
 
           </div> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="text" class="form-control" placeholder="Phone" name="Phone"> 
 
           </div> 
 
           <div class="col-md-12 form-group"> 
 
            <input type="text" class="form-control" placeholder="Address" name="Address"> 
 
           </div> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="text" class="form-control" placeholder="PAN" name="PAN"> 
 
           </div> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="email" class="form-control" placeholder="Email" name="Email"> 
 
           </div> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="text" class="form-control" placeholder="Amount" name="Amount"> 
 
           </div> 
 
           <div class="col-md-6 form-group"> 
 
            <input type="text" class="form-control" placeholder="Purpose" name="Purpose"> 
 
           </div> 
 
           <div> 
 
           <label class="checkbox-inline"> 
 
            <input type="checkbox" value="">Cheque 
 
           </label> 
 
           <label class="checkbox-inline"> 
 
            <input type="checkbox" value="">NEFT 
 
           </label> 
 
           </div> 
 
           <button type="submit" class="btn btn-danger btn-round">SUBMIT</button> 
 
          </form> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

彈出模態代碼的工作我的系統上罰款我已經發布了正確的代碼here.my問題是關於CSS模式彈出，我想設計在同一頁如圖像顯示，但沒有得到適當的效果，如複選框沒有選擇，文本是不正確的佈局，等等...