Bootstrap 模态框强化

Posted 2022-03-16 mankii

以下是基于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");
    // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
);