Bootstrap Modal Position issue

Я хочу разделить экран как left menu и Главное меню с Bootstrap.Bootstrap Modal Position issue

Left Menu будет «Col-мкр-2» и главное меню будет «Col-мкр-10», и я хотел бы сделать главное меню в качестве экрана наложения.

По этой причине я использую bootstrap modal. Как вы можете увидеть в моем ниже коде:

1-) Я не могу использовать "Col-MD-хх" класса в модальный класс

2-) Если я устанавливаю 80% ширины class = "modal-dialog", он почти работает, но левое положение ошибочно

3-) Поэтому я устанавливаю модальное положение с помощью jQuery, но он все еще работает правильно.

Я знаю, что это очень сложно объяснить, но если вы проверите приведенный ниже код, я полагаю, вы поймете ситуацию.

У вас есть предложение исправить эту проблему?

Заранее спасибо.

<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>

источник

2016-05-27 Grcn

Ума его действительно не ясно, ты только чрезмерно основная область и модальный не должны повлиять на левый бар правильно? как посетите здесь http://garhwalonline.com/alchemy/ и нажмите на картинку – DhirendraBisht

Попробуйте это:

CSS:

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

Изменения в HTML:

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

источник

2016-05-27 12:31:43

Это работает .. Это здорово! Большое вам спасибо @Md Mahfuzur Rahman – Grcn

Bootstrap Modal Position issue

ответ

Смежные вопросы