从联合 js 矩形对象调用 bootstrap 模态

Question

我有一个 joint.js 矩形，我想从它调用一个 bootstrap 模式，就好像它是一个按钮一样，这是矩形代码：

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>

知道怎么做吗？提前致谢。

Answer 1

正如 point.js 文档 here 中所述，

您有一些事件可以处理。

代码是这样的：

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

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

这是代码，如果你有 jquery:

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

从联合 js 矩形对象调用 bootstrap 模态

Call a bootstrap modal from a joint js rect object

html

javascript

jointjs

bootstrap-modal