Bootstrap 模态框强化

以下是基于bootstrap4版本做的模态框的强化功能，按需使用即可

1、ajax模态框

// ajax模态框
$(‘#ajaxModal‘).on(‘show.bs.modal‘, function (event) {
  var button = $(event.relatedTarget);
  var recipient = button.data(‘url‘);
  var modal = $(this);
  modal.find(‘.modal-content‘).html("");
  modal.find(‘.modal-content‘).load(recipient, function(rs){
    console.log(recipient+‘加载完成‘);
  });
});

<!-- 按钮 开始 -->
<a href="javascript:;" data-toggle="modal" data-target="#ajaxModal" data-url="audio-play.html" class="px-3">播放</a>
<!-- 按钮 结束 -->

<!-- 模态框 开始 -->
<div class="modal fade" id="ajaxModal" tabindex="-1" role="dialog" aria-labelledby="ajaxModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <!-- 模态框内容 开始 -->
        <!-- 模态框内容 结束 -->
    </div>
  </div>
</div>
<!-- 模态框 结束 -->

PS：模态框最好放在body的根节点中，以免定位错误或被遮挡

2、模态框可拖动

1. 先引入jquery-ui.js（如果不需要别的功能，可以只打包 draggable 功能）
2. 加上以下的js即可

// 模态框可拖动
$(document).on("show.bs.modal", ".modal", function(){
    $(this).find(‘.modal-dialog‘).draggable({
      handle: ‘.modal-header‘
    });
    $(this).css("overflow-y", "scroll");
    // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
});

原文地址：https://www.cnblogs.com/mankii/p/11136857.html