如何创建模态可点击的背景? [英] How do I make the background of a modal clickable?
问题描述
我想创建一个可以插入网站的聊天室。我一直在使用Bootstrap Modal来实现这一点。
我想让我的模态在用户点击模态之外时不会关闭。但是网站背景仍然应该是可点击/可选的,这样用户仍然可以在网站上执行操作。
这是迄今为止编写的代码。 p>
$(window).load(function(){$('#myModal')。modal({backdrop:'static',keyboard:false }); $('#myModal')。modal('show');}); function myFunction(){$('#myModal')。modal('toggle'); window.alert('Hello');}
.vertical -alignment-helper {display:table;身高:100%;宽度:100%;指针事件:无; / *这确保我们仍然可以在模态之外单击以关闭它* /} vertical-align-center {/ *垂直居中* / display:table-cell; vertical-align:middle;指针事件:无;}。modal-content {/ * Bootstrap设置模态对话框类中模态的大小,我们需要继承它* / width:inherit;高度:继承; / *水平居中* / margin:0 auto;指针事件:全部;向左飘浮; max-width:250px; background-color:#ffffff;}。textarea-nonresizable {height:10em; border-radius:1em;概要:无; / *删除默认大纲* /调整大小:无; / *阻止用户调整大小,调整味道* /}。header-cl {background-color:#262626;颜色:#FFFFFF; border-bottom-width:0px;}。header-f {font-size:14px; font-weight:bold;}。body-cl {background-color:#c7c8c9;}。foot-cl {border-top-width:0px; padding-top:0px; background-color:#c7c8c9;颜色:#FFFFFF;}。btn-ft {background-color:#3f1603; color:#FFFFFF;}。btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open> .dropdown-toggle.btn-primary {color:#FFFFFF ; background-color:#3f1603;}
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>< script src =https://ajax.googleapis.com/ajax /libs/jquery/1.12.0/jquery.min.js\"></script><script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min。 js>< / script>< div class =modal fadeid =myModalrole =dialog> < div class =vertical-alignment-helper> < div class =modal-dialog vertical-align-center modal-sm> < div class =modal-content> < div class =modal-header header-cl> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span class =glyphicon glyphicon-minus-sign>< / span> < /按钮> < h4 class =modal-title header -f>联络我们< / h4> < / DIV> < div class =modal-body body-cl> < textarea class =form-control textarea-nonresizableid =commentplaceholder =在此处输入您的信息>< / textarea> < / DIV> < div class =modal-footer foot-cl> < div style =float:left; color:#FFFFFF; font-size:11px; line-height:34px;>技术支持< strong> Stackoverflow< / strong> < / DIV> < button type =buttonclass =btn btn-primary btn-ftonclick =myFunction()>开始文本< / button> < / DIV> < / DIV> < / div><! - /.modal-content - > < / div><! - /.modal-dialog - >< / div><! - /.modal - >
你可以使用 pointer-events:none;
code>放在 .modal
和 .modal-backdrop
上。或隐藏 .modal-backdrop
与 display:none;
.modal {
pointer-events:none;
}
.modal-backdrop {
display:none;
}
老实说,如果你打算修改bootstrap模态的功能,那么你也可以只需使用固定位置的自定义元素,而不是试图对抗Bootstrap CSS。
I want to create a chatbox that can be plugged into website. I have been using Bootstrap Modal to achieve this.
I want my modal to not close when user clicks outside the modal. But the website background should still be clickable/selectable, so that user can still perform operations on the website.
This is the code that I have written so far.
$(window).load(function () {
$('#myModal').modal({ backdrop: 'static', keyboard: false});
$('#myModal').modal('show');
});
function myFunction() {
$('#myModal').modal('toggle');
window.alert('Hello');
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events: all;
float: left;
max-width: 250px;
background-color: #ffffff;
}
.textarea-nonresizable {
height: 10em;
border-radius: 1em;
outline: none; /* removes the default outline */
resize: none; /* prevents the user-resizing, adjust to taste */
}
.header-cl {
background-color: #262626;
color: #FFFFFF;
border-bottom-width: 0px;
}
.header-f {
font-size: 14px;
font-weight: bold;
}
.body-cl {
background-color: #c7c8c9;
}
.foot-cl {
border-top-width: 0px;
padding-top: 0px;
background-color: #c7c8c9;
color: #FFFFFF;
}
.btn-ft {
background-color: #3f1603;
color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #3f1603;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center modal-sm">
<div class="modal-content">
<div class="modal-header header-cl">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-minus-sign"></span>
</button>
<h4 class="modal-title header-f">Contact Us</h4>
</div>
<div class="modal-body body-cl">
<textarea class="form-control textarea-nonresizable" id="comment" placeholder="Type your message here"></textarea>
</div>
<div class="modal-footer foot-cl">
<div style="float:left;color:#FFFFFF;font-size: 11px;line-height: 34px;">
Powered by <strong>Stackoverflow</strong> </div>
<button type="button" class="btn btn-primary btn-ft" onclick="myFunction()">Start Text</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You could use pointer-events: none;
on .modal
and .modal-backdrop
. Or hide .modal-backdrop
with display: none;
.modal {
pointer-events: none;
}
.modal-backdrop {
display: none;
}
To be honest, if you are going to modify the functionality of the bootstrap modal this much, you may as well just use a custom element with fixed position rather than trying to fight the Bootstrap CSS.
这篇关于如何创建模态可点击的背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!