बूटस्ट्रैप मोडल-फ़ूटर मोडल

के नीचे चिपकता नहीं है मेरे पास एक क्षैतिज रूप वाला बूटस्ट्रैप मॉडल है, और वर्तमान में height: 80vh; है। मैं चाहता हूं कि मोडल बड़ा हो और मैं इससे खुश हूं।बूटस्ट्रैप मोडल-फ़ूटर मोडल

समस्या यह है कि modal-footer सही ढंग से व्यवहार नहीं कर रहा है। इसके बजाय नीचे करने के लिए चिपके हुए की, यह अंतरिक्ष का एक बड़ा हिस्सा है कि इनपुट फ़ील्ड से संबंधित होना चाहिए पर है:

enter image description here

मैं तल पर रहने के लिए modal-footer बाध्य करना चाहते हैं, लेकिन फिर भी अन्य चर्चाओं को पढ़ने के बाद और padding: 0; के साथ प्रयास कर रहा हूं मैं इसे ठीक नहीं कर सकता। कोड का एक हिस्सा निम्नलिखित है जिसका मैं उपयोग कर रहा हूं। मैंने इसे पढ़ने के लिए आसान बनाने के लिए कुछ इनपुट फ़ील्ड हटा दिए।

मैं रूढ़िवादी पाद लेख को कैसे ठीक कर सकता हूं?

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    $('.modal').modal({ 
 
     show: true 
 
    }); 
 
    return false; //prevent browser defualt behavior 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <a href="#" class="btn btn-info btn-lg">Click me !</a> 
 
    
 
    <div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <form class="form-horizontal"> 
 
      <div class="control-group"> 
 
       <label class="control-label">Package Name:</label> 
 
       <div class="controls"> 
 
       <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
 
       </div> 
 
      </div> 
 
      <!-- Other fields here --> 
 
      </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

स्रोत

2014-12-04 Flame_Phoenix

क्या आप अपनी शैलियों के साथ डेमो बना सकते हैं? – dfsq

एक बेवकूफ की तरह? कभी भी इस्तेमाल नहीं किया, मैं कोशिश कर सकता हूं: एस क्या आपके पास कोई सुझाव है? –

मैं प्लंकर की सलाह देता हूं। यहां आपके लिए आधार है: http://plnkr.co/edit/EUqJqov3HuAzykIbH9fi?p=preview जैसा कि आप देख सकते हैं कि आपके कोड में शायद कुछ विशिष्ट सीएसएस शैलियों की कमी है, क्योंकि समस्या आपके द्वारा पोस्ट किए गए HTML के साथ पुन: उत्पन्न नहीं होती है। – dfsq

आप .modal-body में .row वर्ग जोड़ सकते हैं और .col-lg-12 वर्ग के अंदर form टैग लगाना चाहिए।

इसे जांचें मुझे उम्मीद है कि यह काम करेगा !!!

<div class="modal fade" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="myModalLabel">Edit Package MyPackageName</h4> 
      </div> 
      <div class="modal-body row"> 
       <div class="col-lg-12" 
       <form class="form-horizontal"> 
        <div class="control-group"> 
         <label class="control-label">Package Name: </label> 
         <div class="controls"> 
          <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
         </div> 
        </div> 
        <!-- Other fields here --> 
       </form> 
      </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="savePackageChangesBtn" data-url="@Url.Action("EditPackage", "Package")">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

स्रोत

2014-12-04 10:55:43

कई समस्याओं से आपको वही समस्या हल हो सकती है अपनी समस्या निर्दिष्ट करें –

बूटस्ट्रैप मोडल-फ़ूटर मोडल

उत्तर

संबंधित मुद्दे