javascript - 如何使用 jquery 从链接属性更改 Bootstrap 模式大小？

Question

我想知道是否可以通过从链接读取属性来更改 Bootstrap 模式大小。例如，bootstrap modal 会在声明属性时从正常大小变为更大的大小。

<a data-toggle="modal" data-target="#xModal" modal-size="large">xModal</a>

所以 jquery 将监听点击并启动模态

        if($('a[attr='modal-size']') === "large"){
            $('#xModal').modal('show'); 
            $(".modal-dialog").html("modal-lg");
          }

我可以通过这个想法来继承代码吗？

Answer 1

您可以监听 show.bs.modal 事件并使用您的 data-modal-width 值更改宽度，如下所示:

HTML

<a data-toggle="modal" data-target="#xModal" data-modal-width="900">xModal</a>

JS

$('#xModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);  // Button that triggered the modal
    var modal = $(this);

    modal.css('width', button.data('modal-width') + 'px');
});