bootstrap模态框使用

最新推荐文章于 2024-03-21 23:14:21 发布

原创最新推荐文章于 2024-03-21 23:14:21 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

插件专栏收录该内容

5 篇文章

订阅专栏

引用：
触发点击处添加：

data-toggle="modal" data-target="#updateModal"

在模态框里设置id:

 <div class="modal fade" id="updateModal" 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="updateModalLabel">温馨提示</h4>
                </div>
                <div class="modal-body">您确定要修改吗？</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="updateInfo()" style="background-color: red">确认</button>
                    <button type="button" class="btn btn-default" style="background-color: #00a65a" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

js代码：

function updateInfo() {
        location.replace("update?id="+id+"&name="+name+"&email="+email+"&age="+age+"&department="+department);
    }
`
``
点击确定时，设置点击事件作为相应

点击取消时，有data-dismiss="modal"属性，会隐藏模态框,并返回false阻止事件继续执行