Azhar Azhar - 3 months ago 54
Javascript Question

how to open bootstrap modal-dialog without id or class using JQuery or JavaScript?

For some reasons i cannot set id or class for my Bootstrap modal-dialog and i need a way to make them work without it, by maybe using JQuery or JavaScript?



<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 1</button>

<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- 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 text11 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" >Open Modal 2</button>

<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- 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 text22 in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</div>
</body>
</html>




Answer

define onclick function to both buttons and pass this as parameter and then use next() property of jquery

<button type="button" class="btn btn-info btn-lg" onclick="firstmodal(this)" >Open Modal 1</button>

      <!-- Modal -->
      <div class="modal fade"  role="dialog">
        <div class="modal-dialog">

          <!-- 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 text11 in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
      </div>

        </div>
      </div>

js

function firstmodal(ele){
$(ele).next().modal('show');
}

Do the same for other modal as well