Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

how to solve Summer Note Issue in Bootstrap modal

Anonymous User 2606 29 Aug 2019

I am using the Summernote Text plugin in my project. But it seems to be not working properly. when we use summernote in bootstrap model and add link or image and close. then it will close all model, now I am including the code below it will work properly; I hope it helps.

Anonymous User

Sr. Software Developer

I am a content writter !

1 Answers

Anonymous User 29 Aug 2019

<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

});

advertising