Question

我想创建一个可以插入网站的聊天框。我一直在使用Bootstrap Modal来实现这一目标。

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

这是我到目前为止编写的代码。

＆＃13;

console.log()

＆＃13;

$(window).load(function () {
  $('#myModal').modal({ backdrop: 'static', keyboard: false});
  $('#myModal').modal('show');
});
function myFunction() {
  $('#myModal').modal('toggle');
  window.alert('Hello');
}

＆＃13;

.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;
}

＆＃13;

Answer 1

您可以在pointer-events: none;和.modal上使用.modal-backdrop。或者使用.modal-backdrop

隐藏display: none;

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

EXAMPLE

老实说，如果你要修改bootstrap模式的功能，你可以使用一个固定位置的自定义元素，而不是试图对抗Bootstrap CSS。

如何使模式可点击的背景？

1 个答案: