从vis.js中选择一个节点有没有办法打开模态?

时间:2017-07-13 10:40:59

标签: javascript twitter-bootstrap bootstrap-modal vis.js vis.js-network

点击我使用vis.js制作的网络地图中的节点时,我试图打开模态

我不确定我将数据目标标记置于何处,但我不确定是否存在问题,下面是我为处理点击操作而编写的JS以及模态

目前,数据目标是在div标签中声明的,网络地图在生成之后放置(我知道这是错误的)

JS正在PHP中生成,因此PHP var被抛出

点击操作 -

network.on( 'click', function(properties) {
     var ids = properties.nodes;
     var clickedNodes = ".$nodes.".get(ids);
     console.log('clicked nodes:', clickedNodes);
     console.log('/monitoring/loadNode/'+clickedNodes[0].id);
     $( '#myModalDeviceDetails' ).html('<h1><center><font color=\'white\'>Loading</font></center></h1>');
     $( '#myModalDeviceDetails' ).load( '/monitoring/loadNode/'+clickedNodes[0].id ).show();
 });

模态 -

<div class="modal fade modal-primary" id="myModalDeviceDetails" tabindex="-1" role="dialog" aria-labelledby="Device Details">
    <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="myModalLabel">Device Details</h4>
            </div>
            <div class="modal-body">
                loading...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

提前致谢!

1 个答案:

答案 0 :(得分:0)

我可以看到这是一个自举模式。它具有以下功能:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

我建议您在加载页面时隐藏模态,而不是仅显示它。