부트 스트랩 navbar의 모달

모달을 w3school에서 사용합니다. 페이지의 본문에 모달을 호출하는 버튼을 넣으면 잘 작동하지만 버튼을 부트 스트랩 navbar 드롭 다운에 넣으면 작동하지 않습니다. 열린 모달이지만 즉시 닫힙니다. 외관상으로는 모달은 드롭 다운 메뉴와 같은 시간에 닫히고 있지만, 어떻게해야할지 모르겠다.부트 스트랩 navbar의 모달

누구든지이 문제에 대한 해결책을 알고 있습니까?

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

말했다되고 그건

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

, 당신은 당신의 자바 스크립트를 변경할 수 있습니다 :

<!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> 유효 HTML5 구문이 아닌 앵커 요소 <a> 내부 앵커의 클릭 이벤트가 리디렉션되지 않도록합니다. 그러나 더 나은 방법은 모두 버튼을 제거하는 것입니다 : 여기

<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

부트 스트랩 navbar의 모달

답변

관련 문제