How to set up the Summernote modal?

Question

JavaScript

Hello. I just can’t set up a modal window for the wysiwyg editor , I do everything according to the documentation, in the same way, but the modal window is still behind the background, the background goes forward, and the modal goes back. I have already tried everything I found on the net, installed different versions of bootstrap, tried to customize styles, etc., but nothing gives a result. Maybe someone faced a similar problem?
I connect everything like this

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>


<div id="summernote">
   <h3>Try me!</h3>
      <p>Super Simple WYSIWYG Editor on Bootstrap</p>
      <p><b>Features:</b></p>
      <ol>
        <li>Worldwide Bootstrap</li>
        <li style="color: blue;">Easy to Install</li>
        <li><strong>Open Source</strong></li>
        <li>Customizing</li>
        <li>Smart Shortcuts</li>
        <li>Works with Firefox, Chrome, and IE9+</li>
      </ol>
 </div>
<script>
$('#summernote').summernote();
</script>

Answer 1

look at all parents of the modal for z-index. the background has z-index: 1040, the modal has 1050. But if the modal has parents with a lower z-index, then it will go beyond the background.