---
title: "how to solve Summer Note Issue in Bootstrap modal"  
description: "how to solve Summer Note Issue in Bootstrap modal"  
author: "Anonymous User"  
published: 2019-08-29  
updated: 2019-08-29  
canonical: https://www.mindstick.com/forum/95297/how-to-solve-summer-note-issue-in-bootstrap-modal  
category: "bootstrap"  
tags: ["bootstrap", "editors"]  
reading_time: 1 minute  

---

# how to solve Summer Note Issue in Bootstrap modal

I am using the Summernote [Text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) [plugin](https://www.mindstick.com/articles/23236/institute-management-for-wordpress-plugin) in my project. But it seems to be not [working properly](https://www.mindstick.com/articles/85595/how-to-troubleshoot-when-your-floating-pond-fountain-is-not-working-properly). when we use summernote in [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) [model](https://yourviews.mindstick.com/view/81334/america-is-reopening-after-corona-lockdown-but-on-swedish-model) and add [link](https://www.mindstick.com/articles/23633/link-builder) or [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) and [close](https://yourviews.mindstick.com/story/1687/rubbing-hands-close-up-benefits). then it will close all model, [now](https://yourviews.mindstick.com/view/81402/it-s-liberals-vs-progressives-in-us-politics-now) I am including the [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii) below it will work properly; I hope it helps.

## Replies

### Reply by Anonymous User

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" />

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div id="summernote">Hello Summernote</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>$('#summernote').summernote({
  dialogsInBody: true
  //,airMode: true
});
```


---

Original Source: https://www.mindstick.com/forum/95297/how-to-solve-summer-note-issue-in-bootstrap-modal

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.