Bootstrap modal not working with Electron


#1

I have a Bootstrap modal not working with Electron. When I click on the submit button for the modal, the modal appears but only after I hit the Yes button twice.

Code

<div class="container">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Savel</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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">
          <p>Save my input?.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" onclick='saveData();'>Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

I am using the following JS:

        <script src="light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
        <script src="light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript">
        <script src="light-bootstrap-dashboard-master/assets/js/bootstrap-notify.js"></script>
        <script src="light-bootstrap-dashboard-master/assets/js/bootstrap-modal.js" type="text/javascript"></script>

#2

Hello,

Did you get this to work? Having similar issue here. It works outside of Electron ie opening index.html and clicking the modal buttons.

Thanks


#3

No, I haven’t found a resolution to this yet. Problem still exists. Any ideas?

Thanks


#4

I did manage to get mine to work but not sure if our problems are related. My problem was how I was loading jQuery. Check your console log to see if there are any errors in there related to jquery or $ being undefined

I had to include this in my renderer.js

const = require('jquery'); window.jQuery = ;
window.Popper = require(‘popper.js’)
require(‘bootstrap’);

And this in my index.html


#5

Interesting. I don’t have a renderer.js file. I am using Bootstrap in my main.html page which is loaded when I run electron.
So, in my situation, how might this work?