HTML Modal模态框示例

chance_66

已于 2024-12-10 16:59:48 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： html 前端

于 2023-09-19 16:14:13 首次发布

本文链接：https://blog.csdn.net/never_tears/article/details/133033803

版权

前端专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何在HTML中通过JavaScript创建和操作一个模态窗口，展示用户信息表格，并允许用户进行临时更新。涉及到了Bootstrap的使用和表单处理函数。

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

<script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
<!--bootstrap.js要在jquery.js后面引入-->
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

<div>
    <input type="button" class="btn btn-primary" onclick="changeUser()" value="打开模态窗口">
</div>

<!-- 模态窗口 -->
<div class="modal fade bs-example-modal-lg" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header"><!-- 头部 -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户信息临时更新</h4>
            </div>
            <form id="appendant_form" class="form-horizontal form-label-left input_mask" action="" method="post">
                <div class="modal-body"><!-- 主体 -->
                    <div>
                        <table class="table table-bordered">

                            <tr>
                                <th width="20%">用户名:</th>
                                <td>
                                    <input type="text" class="form-control" id="modalName"/>
                                </td>
                            </tr>
                            <tr>
                                <th width="20%">角色:</th>
                                <td>
                                    <input type="text" class="form-control" id="modalName"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="modal-footer"><!-- 脚部 -->
                    <input type="button" value="确认" onclick="updateUser()" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    function changeUser() {
		// 打开
        $("#userModal").modal();
    }
    function updateUser() {
		// 关闭
        $("#userModal").modal('hide');
    }
</script>