HTML Modal模态框示例，可拖拽

HTML可拖拽模态框与iframe集成

原创已于 2025-11-19 17:59:25 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

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

前端专栏收录该内容

9 篇文章

订阅专栏

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

<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" style="margin:20px 200px;width:calc(100vw - 400px)">
        <div class="modal-content" id="modal-box" style="position:fixed;">
            <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">用户信息临时更新
                    <button id="modal-move" class="btn btn-success pull-right">长按拖拽</button>
                </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();
        //$('.modal-backdrop').css('display', 'none');//不显示遮罩层
		//$('.modal').css('background', 'rgba(0,0,0,0.05)');//窗口背景颜色，全为0是透明
    }
    function updateUser() {
		// 关闭
        $("#userModal").modal('hide');
    }
</script>

<script>
    // 拖动模态框
    // 1 鼠标按下
	var modalBox = $('#modal-box')[0];
	var modalMove = $('#modal-box #modal-move')[0];
    //注意：拖拽时，始终要保持鼠标在监听对象（此处为id=modal-move的button）上面！！！所以不用button拖拽，可以监听modal-content整个内容div
    modalMove.addEventListener('mousedown', function (e) {
        // 获取鼠标起始位置坐标
        var mouseX = e.pageX;
        var mouseY = e.pageY;
 
        // 模态框的初始左边距 上边距
        var modalBoxX = modalBox.offsetLeft;
        var modalBoxY = modalBox.offsetTop;
 
        // 2 鼠标移动 计算模态框的移动距离
        modalMove.addEventListener('mousemove', moveMouse);
 
        // 3 鼠标弹起 移除鼠标移动事件
        modalMove.addEventListener('mouseup', function() {
            modalMove.removeEventListener('mousemove', moveMouse)
        })
 
        // 鼠标移动事件回调
        function moveMouse(e) {
            // 模态框移动的边距 = 模态框的起始边距 + 鼠标的相对移动值;
            modalBox.style.left = modalBoxX + (e.pageX - mouseX) + 'px';
            modalBox.style.top = modalBoxY + (e.pageY - mouseY) + 'px';
        }
    })
</script>

如果弹出框里面要显示一个url，可以用iframe来实现，参考：

$("#myContentDiv").html('<iframe style="width:100%; height:calc(83vh);" frameborder="1" src="' + url + '">没有数据</iframe>');