从联合js rect对象调用bootstrap模态

时间:2016-05-10 14:30:55

标签: javascript html bootstrap-modal jointjs

我有一个joint.js rect,我想从它调用一个bootstrap模态,好像它是一个按钮,这是rect代码:

var rectdetail = new joint.shapes.basic.Rect({
    position: { x: 450, y: y_value +10},
    size: { width: 130, height: 35 },
    attrs: { 
        rect: { fill: '#333','stroke-width': 0 },
        text: {
            text: 'Detail',
            fill: 'white'
        }
    }
});

这是我在html模板中的模态代码:

<div class="modal fade bs-example-modal-lg" id="myModal1" tabindex="-1" role="dialog" 
      aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" 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">Registrar grupo</h4>
      </div>
      <form>
          {% csrf_token %}
          <div class="modal-body">
            <br/>
                <div class="row">

                        Hello, it's working allright !!

                </div>
          </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
      </form>
    </div>
  </div>
</div>

任何想法如何?,提前谢谢。

1 个答案:

答案 0 :(得分:0)

正如在point.js doc here中所述,

你可以处理一些事件。

代码是这样的:

 paper.on('blank:pointerdown', function(evt, x, y) { 
    alert('pointerdown on a blank area in the paper.')
})

现在,您可以使用bootstrap.js来显示您的模态。

如果你有jquery那就是代码:

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