基础

<button class="btn modal-show" data-target="#mymodal-1">小尺寸</button> <button class="btn modal-show" data-target="#mymodal-2">标准尺寸</button> <button class="btn modal-show" data-target="#mymodal-3">大尺寸</button> <button class="btn modal-show" data-target="#mymodal-4">超大尺寸</button> <div class="modal modal-sm" id="mymodal-1"> <div class="modal-header"> <div class="modal-title">模态窗口1</div> <div class="modal-close rotate">×</div> </div> <div class="modal-body"> 【本段内容可在内容管理的区块管理中编辑】美的集团是一家全球领先的消费电器、暖通空调、机器人及工业自动化系统的科技集团。提供多元化的产品种类,包括空调、冰箱、洗衣机、厨房家电、及各类小型家电。美的坚守 “为客户创造价值”的原则,致力创造美好生活。美的专注于持续的技术革新,包括机器人,以提升产品及服务质量,令生活更舒适、更美好。 <br><a href="javascript:;" id="tips">显示提示</a> </div> <div class="modal-footer"> <button class="btn modal-close">取消</button> <button class="btn btn-blue">确定</button> </div> </div> <div class="modal" id="mymodal-2"> <div class="modal-header"> <div class="modal-title">模态窗口2</div> <div class="modal-close rotate">×</div> </div> <div class="modal-body"> 【本段内容可在内容管理的区块管理中编辑】美的集团是一家全球领先的消费电器、暖通空调、机器人及工业自动化系统的科技集团。提供多元化的产品种类,包括空调、冰箱、洗衣机、厨房家电、及各类小型家电。美的坚守 “为客户创造价值”的原则,致力创造美好生活。美的专注于持续的技术革新,包括机器人,以提升产品及服务质量,令生活更舒适、更美好。 美的于1968年成立于中国广东,迄今已建立全球平台,拥有约200家子公司及10个战略业务单位。美的于截止2015年12月31日止财政年度实现收入超过187亿欧元,在全球拥有约11万名员工。 美的在全球运营29个生产基地及约260个物流仓库。美的是一家于深圳证劵交易所上市的民营企业(000333),其多元化的股份结构显示,近20%股份为国际机构投资者所持有。<br><a href="javascript:;" class="modal-close">关闭窗口</a> </div> <div class="modal-footer"> <button class="btn modal-close">取消</button> <button class="btn btn-blue">确定</button> </div> </div> <div class="modal modal-bg" id="mymodal-3"> <div class="modal-header"> <div class="modal-title">模态窗口3</div> <div class="modal-close rotate">×</div> </div> <div class="modal-body"> 【本段内容可在内容管理的区块管理中编辑】美的集团是一家全球领先的消费电器、暖通空调、机器人及工业自动化系统的科技集团。提供多元化的产品种类,包括空调、冰箱、洗衣机、厨房家电、及各类小型家电。美的坚守 “为客户创造价值”的原则,致力创造美好生活。美的专注于持续的技术革新,包括机器人,以提升产品及服务质量,令生活更舒适、更美好。 美的于1968年成立于中国广东,迄今已建立全球平台,拥有约200家子公司及10个战略业务单位。美的于截止2015年12月31日止财政年度实现收入超过187亿欧元,在全球拥有约11万名员工。 美的在全球运营29个生产基地及约260个物流仓库。美的是一家于深圳证劵交易所上市的民营企业(000333),其多元化的股份结构显示,近20%股份为国际机构投资者所持有。 </div> <div class="modal-footer"> <button class="btn modal-close">取消</button> <button class="btn btn-blue">确定</button> </div> </div> <div class="modal modal-lg" id="mymodal-4"> <div class="modal-header"> <div class="modal-title">模态窗口4</div> <div class="modal-close rotate">×</div> </div> <div class="modal-body"> 【本段内容可在内容管理的区块管理中编辑】美的集团是一家全球领先的消费电器、暖通空调、机器人及工业自动化系统的科技集团。提供多元化的产品种类,包括空调、冰箱、洗衣机、厨房家电、及各类小型家电。美的坚守 “为客户创造价值”的原则,致力创造美好生活。美的专注于持续的技术革新,包括机器人,以提升产品及服务质量,令生活更舒适、更美好。 美的于1968年成立于中国广东,迄今已建立全球平台,拥有约200家子公司及10个战略业务单位。美的于截止2015年12月31日止财政年度实现收入超过187亿欧元,在全球拥有约11万名员工。 美的在全球运营29个生产基地及约260个物流仓库。美的是一家于深圳证劵交易所上市的民营企业(000333),其多元化的股份结构显示,近20%股份为国际机构投资者所持有。 </div> <div class="modal-footer"> <button class="btn modal-close">取消</button> <button class="btn btn-blue">确定</button> </div> </div>

动画效果

<button class="btn modal-show" data-target="#mymodal-5">沿X轴转动</button> <div class="modal animated flipInY" id="mymodal-5"> <div class="modal-header"> <div class="modal-title">模态窗口5</div> <div class="modal-close rotate">×</div> </div> <div class="modal-body"> 【本段内容可在内容管理的区块管理中编辑】美的集团是一家全球领先的消费电器、暖通空调、机器人及工业自动化系统的科技集团。提供多元化的产品种类,包括空调、冰箱、洗衣机、厨房家电、及各类小型家电。美的坚守 “为客户创造价值”的原则,致力创造美好生活。美的专注于持续的技术革新,包括机器人,以提升产品及服务质量,令生活更舒适、更美好。 </div> <div class="modal-footer"> <button class="btn modal-close">取消</button> <button class="btn btn-blue">确定</button> </div> </div>