使用 javascript onClick 显示引导模式答案

【问题标题】：Display Bootstrap Modal using javascript onClick使用 javascript onClick 显示引导模式
【发布时间】：2017-02-02 00:58:26
【问题描述】：

如何在单击时在 javascipt 中添加引导模式。到目前为止，我只能在点击时发出警报（“你好”）。如何提示模态框？

 graph.on("click", function (params) {
       var node = params['nodes'][0];
       displayInfo=false;
       if(node!=null){
        console.log('node:'+ params['nodes'][0]);
         x = params["pointer"]['canvas']['x'];
         y = params["pointer"]['canvas']['y'];   

         displayInfo=true;
         lastNode = nodes.get(node);
         lastClick = params['pointer'];
         //console.log(node);   
       }
       alert("hello");

       //add boostrap modal here    
     });

【问题讨论】：

Bootstrap modals: how to open with onClick=""的可能重复

标签： javascript jquery bootstrap-modal

【解决方案1】：

您不需要点击。

<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>

<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>

如果您需要 onclick 事件，请按如下方式使用：

    graph.on("click", function (params) {
$('#myModal').modal('show');
}

参考：http://getbootstrap.com/javascript/#modals

【讨论】：

【解决方案2】：

创建模态 HTML 并为其分配 id，例如“my_modal” http://getbootstrap.com/javascript/#live-demo
使用代码在js处显示模态：

$("#my_modal").modal('show');

【讨论】：

顺便说一句，我们刚刚分享了相同的答案朋友：p

【解决方案3】：

先让modal弹出div然后，配置使用.modal('show') 例如：-

 <a href="" data-target="#modalDiv" data-toggle="modal"> You can also use onClick call for jquery here.  </a>
  <div id="modalDiv">
       //some content
  </div>

在jquery中使用，

     $("#modalDiv").modal('show');

查看http://getbootstrap.com/javascript/#live-demo

【讨论】：

【解决方案4】：

你可以像使用id一样

$("#modal-id").modal("show");

或者你可以使用类名$(".modal-class").modal("show");

【讨论】：