bootstrap3-dialog自定义模态框使用

最新推荐文章于 2024-05-10 09:51:33 发布

小喵呀

最新推荐文章于 2024-05-10 09:51:33 发布

阅读量790

点赞数

CC 4.0 BY-SA版权

分类专栏：小记录

本文链接：https://blog.youkuaiyun.com/qq_36574122/article/details/90698239

小记录专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Bootstrap3-Dialog库创建并自定义模态框，包括动态插入内容到模态框body及设置自定义尺寸的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//相关文件引入
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"  rel ="stylesheet" type = "text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />

<script src="jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"> </script >

//实现代码，params：动态插入模态框body，size：模态框自定义形状大小

function showModal(params,size) {
  var dialog = new BootstrapDialog({
    title:size.name,
    message: function () {
      var $message = $('<div>'+ params +'</div>');
      return $message;
    },
    closable: true,
    buttons: [{
      label: '关闭',
      action: function(dialog){
        dialog.close();
      }
    }]
  });
  dialog.realize();
  dialog.getModalHeader().css('background-color', '#192b63');
  dialog.getModalBody().css('width', size.width);
  dialog.getModalBody().css('height', size.height);
  dialog.getModalBody().css('color', '#697dca');
  dialog.open();
}