如何使用JQuery或JavaScript打开没有ID或类的引导方式对话框？

Question

由于某些原因，我无法为我的Bootstrap模态对话框设置id或class ，因此我需要一种方法来使它们在没有它的情况下工作，也许可以使用JQuery或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 1

定义两个按钮的onclick函数并将其作为参数传递，然后使用jquery的next（）属性

<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');
}

对其他模态也做同样的事情

Answer 2

$(document).ready(function(){

    var buttons = $(".container button");

    if(buttons.length > 0){
        buttons[0].on("click", function(){
            //this will return two modals
            var modals = $(".container div.modal")

            if(modals.length > 0){
                modals[0].modal("toggle");
            }
        })
    }

    if(buttons.length > 1){
        buttons[1].on("click", function(){
            //this will return two modals
            var modals = $(".container div.modal")

            if(modals.length > 1){
                modals[1].modal("toggle");
            }
        })
    }
})

希望能解决问题

如何使用JQuery或JavaScript打开没有ID或类的引导方式对话框？

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-08-13 09:58:21

解决方案2
1 2016-08-13 10:02:27

如何使用JQuery或JavaScript打开没有ID或类的引导方式对话框？

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-08-13 09:58:21

解决方案2 1 2016-08-13 10:02:27

解决方案1
2 已采纳 2016-08-13 09:58:21

解决方案2
1 2016-08-13 10:02:27