Question

我可以使用相同的JS文件和相同的类和ID的多个模态吗？我构建了这段代码：

<button id='myBtn'>Comanda/Reducere</button>
        <div id='myModal' class='modal'>
         <div class='modal-content'>
           <span class='close'>&times;</span>
           <form class='' action='includes\comanda.inc.php?id=".$row_oferte['id']. " ' method='post'>
             <input type='text' name='nr_comanda' placeholder='Numar comanda'>
             <input type='text' name='termen_livrare' placeholder='Termend de livrare'>
             <input type='submit' value='Coamnda'>
           </form>
           </br>
           <form class='' action='includes/reducere.inc.php?id=".$row_oferte['id']. " ' method='post'>
             <input type='text' name='reducere_update' placeholder='Reducere'>
             <input type='submit' value='Modifica'>
           </form>
         </div>
         <script type='text/javascript' src='js/button.js'></script>

在ofertare.php文件中，我想在comanda.php文件中使用这个模态但是与其他内容一起使用它并没有打开comanda.php文件中的模态。

JS文件是button.js：

// 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 on 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";
    }
}

Answer 1

以下是在单个页面中使用多个模态的示例。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<button data-toggle="modal" data-target="#modal1" class="btn btn-default">Modal 1</button>
<button data-toggle="modal" data-target="#modal2" class="btn btn-default">Modal 2</button>
<button data-toggle="modal" data-target="#modal3" class="btn btn-default">Modal 3</button>
	
<!-- Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal1Label">Modal 1</h4>
      </div>
      <div class="modal-body">
       I am modal 1
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- end Modal 1 -->

<!-- Modal 2 -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal2Label">Modal 2</h4>
      </div>
      <div class="modal-body">
        I am modal 2
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- end Modal 2 -->	

<!-- Modal 3 -->
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal3Label">Modal 3</h4>
      </div>
      <div class="modal-body">
        I am modal 3
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- end Modal 3 -->		
	
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

＆＃13; 以上代码段的{jsbin https://jsbin.com/fenehel/edit?html,output 根据您的需要，您可以根据需要在页脚中添加模态，然后在各自的页面上使用它们。您可以在此处了解有关引导模态的更多信息http://getbootstrap.com/javascript/#modals

具有相同JS文件和相同类的多个模态

1 个答案: