モーダルクリック可能の背景を作成するにはどうすればよいですか？

Question

私はウェブサイトに接続できるチャットボックスを作成したいと思います。私はこれを達成するためにBootstrap Modalを使用しています。

ユーザーがモーダル外をクリックしたときにモーダルを閉じないようにします。しかし、ウェブサイトの背景は、クリック可能/選択可能でなければならないので、ユーザーはウェブサイト上で操作を実行することができます。

これまでに書いたコードです。

$(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 -->

Answer 1

あなたは.modalと.modal-backdropにpointer-events: none;を使用することができます。あなたはこのくらいのブートストラップモーダルの機能を変更しようとしている場合、または正直に言うとdisplay: none;

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

EXAMPLE

で.modal-backdropを隠し、あなたにもちょうど固定位置ではなく、とカスタム要素を使用することができますブートストラップCSSと戦おうとしています。