bootstrap-modal模态框位置

最新推荐文章于 2021-01-26 17:34:09 发布

原创最新推荐文章于 2021-01-26 17:34:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

CLAA 专栏收录该内容

221 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的模态框位置调整功能，通过修改CSS样式将模态框定位到页面的40%高度处。此外，还实现了模态框的拖拽功能，允许用户通过模态框的头部进行位置调整，提供了更好的交互体验。

弹出模态框移动位置：$(levelModalWinId).css("top", "40%");

//点击评级
function btn_danger_src_level_click(){
	showLevelAddWin();
}

function showLevelAddWin(){  
	var levelModalWinId = "#level_manager_win";
	$(levelModalWinId).unbind("hidden.bs.modal");
    $(levelModalWinId).on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });
    $(levelModalWinId).on('shown.bs.modal', function () { 
    	// 初始化数据.
    	$(levelModalWinId).css("top", "40%");
    });
	// show modal window
	$(levelModalWinId).modal({backdrop: 'static', keyboard: false});
	//可拖拽
	$(levelModalWinId).draggable({cursor: "move", handle: '.modal-header'});
	
}