基于bootstrap 在同一个界面弹出不同的模态框

最新推荐文章于 2024-04-15 03:56:14 发布

ChiangShenHung

最新推荐文章于 2024-04-15 03:56:14 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：技术回顾学习之路文章标签： bootstrap 模态框

本文链接：https://blog.youkuaiyun.com/jinshong/article/details/83501880

本文介绍如何在Bootstrap中通过设置不同的模态框ID，实现在同一页面上弹出多个独立内容的模态窗口，实现不同界面的交互体验。

同一个页面如何操作多个模态框的弹出

<button class="btn btn-info" data-toggle="modal" data-target="#myModal">第一个模态框</button>

<button class="btn ben-default" data-toggle="modal" data-target="#myModal_2">第二个模态框</button>

        <!--第一个模态框的ID为myModal-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal" 
        				aria-hidden="true">×
        			</button>
        			<h4 class="modal-title" id="myModalLabel">
        				<!--模态框标题-->
        			</h4>
        		</div>
        		<div class="modal-body" style="width: 550px; margin: 0px auto;">
        			<!-- 添加你的弹窗内容 -->
        			
        			<!-- 添加你