bootstrap模态框点击周边不隐藏、js控制隐藏、去除关闭按钮

Love The Way You Lie 2023-07-08 09:24 18阅读 0赞

实现功能：

*  默认不显示模态框：aria-hidden="true"
 *  点击模态框周边和 esc 按钮，不自动隐藏模态框：data-backdrop="static" data-keyboard="false"
 *  使用 js 中的 show 函数控制模态框的显示；hide 函数控制模态框的隐藏

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"> 
    	<title>模态框（Modal）插件</title>
    	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal">
    	打开模态框
    </button>
    
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="modalLabel">
    					模态框标题
    				</h4>
    			</div>
    			<div class="modal-body">
    				内容
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-primary">
    					按钮
    				</button>
    			</div>
    		</div><
    	</div>
    	<script type="text/javascript">
    		//js里调用show函数，控制打开模态框
    		function show() {
    			$('#modal').modal('show');
    		}
    		//js里调用close函数，控制关闭模态框
    		function hide() {
    			$('#modal').modal('hide');
    		}
    	</script>
    </div>
    </body>
    </html>

--------------------

### 【Java面试题与答案】整理推荐 ###

*  [基础与语法][Link 1]
 *  [集合][Link 2]
 *  [网络编程][Link 3]
 *  [并发编程][Link 4]
 *  [Web][]
 *  [安全][Link 5]
 *  [设计模式][Link 6]
 *  [框架][Link 7]
 *  [算法与数据结构][Link 8]
 *  [异常][Link 9]
 *  [文件解析与生成][Link 10]
 *  [Linux][]
 *  [MySQL][]
 *  [Oracle][]
 *  [Redis][]
 *  [Dubbo][]

[Link 1]: https://www.javanav.com/interview/93b0069472fd479393006c0e73043fc4.html
[Link 2]: https://www.javanav.com/interview/4147d95e693945e7a50345fd33ec817e.html
[Link 3]: https://www.javanav.com/interview/68a57ffc78de4133bb890bdd502ac418.html
[Link 4]: https://www.javanav.com/interview/36a24fa3258e45c89873f474ce914912.html
[Web]: https://www.javanav.com/interview/4e27cb63adb440c6825a159d35cf4010.html
[Link 5]: https://www.javanav.com/interview/03affb2ce3f04fda8853f714e5764906.html
[Link 6]: https://www.javanav.com/interview/07a32a9ff17a4006a53550ce658cafed.html
[Link 7]: https://www.javanav.com/interview/5c466456e9b54ab0a749b5948e51f1d3.html
[Link 8]: https://www.javanav.com/interview/943f917041ee4f05add24539f5b861b2.html
[Link 9]: https://www.javanav.com/interview/d3f058cfc05d4c6dadd821b622e84d36.html
[Link 10]: https://www.javanav.com/interview/67a50996c28f418e83b109ea42fc3eff.html
[Linux]: https://www.javanav.com/interview/00cccb81729540d1923bd0a0ef49533a.html
[MySQL]: https://www.javanav.com/interview/d311e78502a845f1a4bb307bd6aec2b3.html
[Oracle]: https://www.javanav.com/interview/5f29e9677edf4a16be3dce30d257c9ab.html
[Redis]: https://www.javanav.com/interview/066c62b3af4d4827b2243a822c3084a9.html
[Dubbo]: https://www.javanav.com/interview/9a3e7a7740324757abaab953f7ebc455.html