Javascript 如何使模态的背景可单击？

我想创建一个聊天室，可以插入到网站。我一直在使用引导模式来实现这一点

我希望当用户在模式外单击时，我的模式不会关闭。但网站背景仍然应该是可点击/可选择的，这样用户仍然可以在网站上执行操作

这是迄今为止我编写的代码

$（窗口）。加载（函数（）{
$（'#myModal'）.modal（{background:'static'，keyboard:false}）；
$（'myModal'）.modal（'show'）；
});
函数myFunction（）{
$（'#myModal'）.modal（'toggle'）；
window.alert（'Hello'）；
}

。垂直对齐辅助对象{
显示：表格；
身高：100%；
宽度：100%；
指针事件：无；/*这确保我们仍然可以在模式外部单击以关闭它*/
}
.垂直对齐中心{
/*垂直居中*/
显示：表格单元格；
垂直对齐：中间对齐；
指针事件：无；
}
.模态内容{
/*引导设置模态对话框类中模态的大小，我们需要继承它*/
宽度：继承；
身高：继承；
/*水平居中*/
保证金：0自动；
指针事件：全部；
浮动：左；
最大宽度：250px；
背景色：#ffffff；
}
.text面积不可测量{
高度：10公分；
边界半径：1米；
大纲：无；/*删除默认大纲*/
调整大小：无；/*防止用户调整大小，根据口味进行调整*/
}
.标题cl{
背景色：#262626；
颜色：#FFFFFF；
边框底宽：0px；
}
.标题-f{
字体大小：14px；
字体大小：粗体；
}
.主体cl{
背景色：#c7c8c9；
}
.英尺cl{
边框顶部宽度：0px；
填充顶部：0px；
背景色：#c7c8c9；
颜色：#FFFFFF；
}
.btn英尺{
背景色：#3f1603；
颜色：#FFFFFF；
}
.btn-primary:悬停，.btn-primary:焦点，.btn-primary:活动，.btn-primary.活动，.open>.dropdown-toggle.btn-primary{
颜色：#FFFFFF；
背景色：#3f1603；
}

联系我们
由堆栈溢出供电
起始文本

您可以使用

指针事件：无在
.modal
和
.modal background
上。或使用
显示隐藏
.model background
：无

.modal {
    pointer-events: none;
}
.modal-backdrop {
    display: none;
}


老实说，如果你要修改引导模式的功能这么多，你最好使用一个固定位置的自定义元素，而不是试图对抗引导CSS