模态框尺寸调整代码演示

visibility6511 1 0 zip 2024-10-28 16:10:00

Bootstrap 3模态对话框（Modal）是网页设计中常用的交互元素，它允许用户在不离开当前页面的情况下查看或操作额外的信息。在Bootstrap 3 Tutorial 83 - Modal Sizing中，我们将学习如何调整模态的大小。模态对话框主要由三部分组成：<div class=\"modal\">（模态容器）、<div class=\"modal-dialog\">（对话框容器）和<div class=\"modal-content\">（内容区域）。调整模态大小主要通过修改.modal-dialog的CSS样式实现。

默认大小：默认情况下，模态会根据内容自动调整大小，无需额外设置。
小尺寸模态：可以通过添加.modal-sm类创建小尺寸模态，宽度约为300像素。


<div class='\"modal-dialog' modal-sm\"="">

大尺寸模态：使用.modal-lg类创建大尺寸模态，宽度约为900像素。


<div class='\"modal-dialog' modal-lg\"="">

// 初始化模态 $('#myModal').modal({ backdrop: 'static', // 设置背景层为不透明 keyboard: false // 阻止Esc键关闭模态 }); // 触发模态显示 $('#myModal').modal('show'); // 关闭模态 $('#myModal').modal('hide');