modal in bootstrap navbar

Я использую modal от w3school, и он отлично работает, если я надену кнопку для вызова модального в теле страницы, но если я положу кнопку в раскрывающемся списке навигации bootstrap, это не сработает. Он открыт, но он сразу же закрывается. По-видимому модальное закрывается в то же время, что и выпадающее меню, но я не знаю, как это сделать.modal in bootstrap navbar

Кто-нибудь знает, как решить эту проблему?

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     /* The Modal (background) */ 
     .modal { 
      display: none; /* Hidden by default */ 
      position: fixed; /* Stay in place */ 
      z-index: 1; /* Sit on top */ 
      padding-top: 100px; /* Location of the box */ 
      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 */ 
     } 

     /* Modal Content */ 
     .modal-content { 
      background-color: #fefefe; 
      margin: auto; 
      padding: 20px; 
      border: 1px solid #888; 
      width: 80%; 
     } 

     /* The Close Button */ 
     .close { 
      color: #aaaaaa; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
     } 

     .close:hover, 
     .close:focus { 
      color: #000; 
      text-decoration: none; 
      cursor: pointer; 
     } 
    </style> 
</head> 
<body> 

<h2>Modal Example</h2> 

<div id="navbar" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-right white nav-rlm"> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <i>Admin</i> 
       <i class="glyphicon glyphicon-user"></i> 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu dropdown-user"> 
       <li> 
        <a href="<?php echo base_url(''); ?>"><button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 


<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
     <span class="close">×</span> 
     <p>Some text in the Modal..</p> 
    </div> 

</div> 

<script> 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the button that opens the modal 
    var btn = document.getElementById("myBtn"); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // When the user clicks the button, open the modal 
    btn.onclick = function() { 
     modal.style.display = "block"; 
    } 

    // When the user clicks on <span> (x), close the modal 
    span.onclick = function() { 
     modal.style.display = "none"; 
    } 

    // When the user clicks anywhere outside of the modal, close it 
    window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
    } 
</script> 

</body> 
</html>

источник

2016-08-29 Sasa

Открытый Модальные <button> находится внутри анкерного элемента <a>, который не является допустимым синтаксисом HTML5:

<a href="<?php echo base_url(''); ?>"> 
    <button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About 
</a>

Это, как говорится, вы можете изменить JavaScript, чтобы:

// When the user clicks the button, open the modal 
btn.onclick = function(e) { 
    e.preventDefault(); 
    modal.style.display = "block"; 
}

Чтобы предотвратить переадресацию события click на якоре. Однако лучший подход будет удалить кнопку в целом:

<ul class="dropdown-menu dropdown-user"> 
    <li> 
     <a id="myBtn" href="<?php echo base_url(''); ?>"><i class="glyphicon glyphicon-flag text-primary"></i> About</a> 
    </li> 
</ul>

Вот живой пример:
http://www.bootply.com/W8ESbhIkcd

Немного не по теме, Вы рассмотрели с помощью встроенного в начальной загрузки модальный?
http://getbootstrap.com/javascript/#modals

источник

2016-08-29 19:05:34 StaticBeagle

Большое спасибо, это работает !. Искренне, когда я задал вопрос, что у меня есть бутстрап модальный, но было слишком поздно. Еще раз спасибо. – Sasa

modal in bootstrap navbar

ответ

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