如何创建模态可点击的背景？ [英] 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; 
} 
  

Example

老实说，如果你打算修改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;
}

EXAMPLE

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屋！