Bootstrap Modal Position Problem

Ich möchte den Bildschirm als linken Menü und Hauptmenü mit Bootstrap.Bootstrap Modal Position Problem

linkes Menü wird „col-md-2“ und das Hauptmenü wird „col-md-10“ sein und ich möchte Hauptmenü als Overlay-Bildschirm machen.

Aus diesem Grund verwende ich Bootstrap modal. Wie Sie in meinem Code unten sehen können:

1-) kann ich "col-md-xx" Klasse in Modal-Klasse nicht

2-) Wenn ich die 80% Breite eingestellt class = "modal-dialog", es funktioniert fast, aber die linke Position ist falsch

3-) Daher setze ich die modale Position mit jQuery, aber es funktioniert immer noch richtig.

Ich weiß, dass es sehr schwierig zu erklären ist, aber wenn Sie den folgenden Code überprüfen, nehme ich an, dass Sie die Situation verstehen werden.

Haben Sie Vorschläge, dieses Problem zu beheben?

Vielen Dank im Voraus.

<html lang="en"> 

<head> 
    <title>-</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
     #leftmenu, 
     #mainmenu { 
      border-style: solid; 
     } 
    </style> 

    <script> 
     var aa = 1; 
     $(document).ready(function() { 
      $("#myModal").modal({ 
       backdrop: 'static' 
      }); 

      $("#myModal2").width($("#mainmenu").width()); 
      $("#myModal2").offset({ 
       left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number) 
      }) 
     }); 
    </script> 
</head> 

<body> 
    <div class="row"> 
     <div id="leftmenu" class="col-md-2">Left Menu</div> 
     <div id="mainmenu" class="col-md-10"> 
      Main 
      <!-- Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
       <div id="myModal2" class="modal-dialog" style="width:80%;"> 
        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Modal Header</h4> 
         </div> 
         <div class="modal-body"> 
          <p>Some text in the modal.</p> 
          <button type="button" class="btn btn-info btn-lg" id="myBtn2">Open Modal2</button> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

Quelle

2016-05-27 Grcn

Um seine wirklich nicht klar, haben Sie nur allzu Hauptbereich und modal sollte nicht wirksam linke Leiste korrekt? wie besuchen Sie hier http://garhwalonline.com/alchemy/ und klicken Sie auf das Bild – DhirendraBisht

Versuchen Sie folgendes:

CSS:

.left-zero { 
    margin-left: 0 !important; 
}

Wechsel in HTML:

<div id="myModal2" class="modal-dialog left-zero">

Quelle

2016-05-27 12:31:43

Es funktioniert .. Das ist großartig! Vielen Dank @Md Mahfuzur Rahman – Grcn

Bootstrap Modal Position Problem

Antwort

Verwandte Themen