modal in bootstrap navbar

Ich benutze modal von w3school, und es funktioniert gut, wenn ich Button zum Aufrufen von Modal im Körper der Seite, aber wenn ich Knopf in Bootstrap Navbar DropDown funktioniert es nicht funktioniert. Es ist offen modal, aber es ist sofort nah. Offenbar schließt Modal in der gleichen Zeit wie Dropdown-Menü, aber ich weiß nicht wie.modal in bootstrap navbar

Kennt jemand Lösung für dieses Problem?

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

Quelle

2016-08-29 Sasa

Die Open Modal <button> ist innerhalb eines Ankerelement <a>, die keine gültigen HTML5 Syntax:

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

Dass gesagt wird, könnten Sie Ihre JavaScript ändern:

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

Um zu verhindern, dass das Click-Ereignis auf dem Anker umgeleitet wird. Allerdings ein besserer Ansatz wird die Taste ganz entfernen:

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

Hier ist ein anschauliches Beispiel:
http://www.bootply.com/W8ESbhIkcd

etwas off topic, haben Sie darüber nachgedacht, die sich im internen Bootstrap-modal mit?
http://getbootstrap.com/javascript/#modals

Quelle

2016-08-29 19:05:34 StaticBeagle

Vielen Dank, es funktioniert !. Mit freundlichen Grüßen, als ich eine Frage gestellt habe, ist mir aufgefallen, dass Bootstrap Modal existiert, aber zu spät war. Danke noch einmal. – Sasa

modal in bootstrap navbar

Antwort

Verwandte Themen