CODEWITHSUNDEEP
javascript.net-corebootstrap-4bootstrap-modal
Steve Newton
Steve Newton

Reputation: 1078

Bootstrap 4 - Modal. Working in Edge, not in Chrome or Firefox

This example which is using the example from the website, works perfectly in Edge. Both the remote call or HTML injection options in the javascript works.

In Chrome, the screen greys over button onclick, and HTML injection method and remote injection method works but the modal is not displayed.

CSS shows in _modal.scss: .Modal { display: None; }

...and in_transitions.scss: .fade:not(.show) { opacity: 0; }.

If I remove these two properties i see the modal.

In Firefox, same as Chrome.

Javascript:

<script>

    $( '#exampleModal' ).on( 'show.bs.modal', function ( e ) {

        var button = $( e.relatedTarget );
        var modal = $( this );

        // load content from HTML string
        modal.find( '.modal-body' ).html( "Nice modal body baby..." );
        console.log( button.data( "url" ) );
        // or, load content from value of data-remote url
        //modal.find('.modal-body').load(button.data("url"));

    } );

</script>

Modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Button

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="margin-bottom: 10px" data-url="@Url.Action("_ClientDetails", new { PolicyTransactionNo = Model.PolicyTransactionNo })">
View Client Details
</button>

Upvotes: 0

Views: 1391

Answers (1)

Jonathan Akwetey Okine
Jonathan Akwetey Okine

Reputation: 1295

so, I replicated your code and the modal shows in chrome and firefox.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">


  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



  <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



  <title>Hello, world!</title>


</head>


 <body>


 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="margin-bottom: 10px" data-url="@Url.Action("_ClientDetails", new { PolicyTransactionNo = Model.PolicyTransactionNo })">


   View Client Details
  </button>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
            aria-labelledby="exampleModalLabel1">


<div class="modal-dialog" role="document">


<div class="modal-content">


  <div class="modal-header">


  <button type="button" class="close" data-dismiss="modal" 
                  aria-label="Close"><span aria-hidden="true">&times;</span></button>


   </div>


  <div class="modal-body">



 </div>


  <div class="modal-footer">


   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


 </div>


</div>


</div>


</div>



 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


 <script 
   src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity="sha384- 
   ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
    integrity="sha384- 
     JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
     crossorigin="anonymous">
     </script>



 <script>

        $('#exampleModal').on('show.bs.modal', function (e) {

            var button = $(e.relatedTarget);
            var modal = $(this);

            // load content from HTML string
            modal.find('.modal-body').html("Nice modal body baby...");
            console.log(button.data("url"));
            // or, load content from value of data-remote url
            //modal.find('.modal-body').load(button.data("url"));

        });

    </script>



 </body>
</html>

Upvotes: 1

Related Questions