Search code examples
phplaravelbulma

Problem with loading modal in bulma with Laravel

I have a link on one page that goes to another route where when clicked I want to open modal. I am using bulma with Laravel. Currently when clicked it goes to that route and it shows plain html and not modal as it is supposed to. Any help is appreciated. Here is my code.

index.blade.php

<div class="host" id="q-consent">
    <div>
        Do you consent for us to use your information in accordance with our
        <a href="{{route('privacy-policy'}}" target="_blank">privacy policy</a>
    </div>
</div>

privacy-policy.blade.php

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
</head>
<body>
<div id="modal-fadeInScale-fs" class="modal modal-fx-fadeInScale">
 
    <div class="modal-content modal-card">
        <div>
            <button class="modal-button-close delete" id="closecross" aria-label="close" style="float:right; margin-bottom: 20px;">Call Modal</button>
        </div>
        <section class="modal-card-body">
 
            <div class="content">
 
                <h1 class="has-text-centered">PRIVACY POLICY</h1>
 
                <p>1. This Privacy Policy is an integral part of Terms and Condition of Use and the User shall
                agree that he/she have read and understood and agreed to be bound by this Privacy
                Policy by accepting Terms and Conditions of Use and/or use/access any of Protranslate
                contents/services on the Platform. <br>
                2. This Privacy Policy contains terms of use, disclosure and collection of User information. <br></p>
            <div> 
        </section>
        <footer class="modal-card-foot">
            <button class="modal-button-close button is-success">Yes</button>
            <button class="modal-button-close button" id="closebtn">Close</button>
        </footer>
    </div>
</div>
<script>
 
    $("#lanuchModal").click(function() {
     
      $(".modal").addClass("is-active"); 
     
    });
 
 
    $(".modal-close").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });
     
    
    $("#closebtn").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });
     
    $("#closecross").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });

</script>
</body>
</html>
Solution

  • I see multiple issues with your code samples

    1. References - In the below code you want to launch the element with an ID launchModal but your button does not have an ID
        privacy-policy.blade.php
    $("#lanuchModal").click(function() {
         
          $(".modal").addClass("is-active"); 
         
        });

    index.blade.php
    <a href="{{route('privacy-policy'}}" target="_blank">privacy policy</a>

    1. Swap the headers and JS Add the JS and Imports to Index

    2. Include the modal

    So your Code should be like this

    index.blade.php

    <html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
</head>
<body>

<div class="host" id="q-consent">
    <div>
        Do you consent for us to use your information in accordance with our
    
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true" id="lanuchModal">Privacy Policy</button>

    </div>
</div>

@include('privacy-policy.blade.php)

<script>
 
    $("#lanuchModal").click(function() {
     
      $(".modal").addClass("is-active"); 
     
    });
 
 
    $(".modal-close").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });
     
    
    $("#closebtn").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });
     
    $("#closecross").click(function() {
     
       $(".modal").removeClass("is-active");
     
    });

</script>
</body>
</html>

    Privacy-policy.blade.php

    <div id="modal-fadeInScale-fs" class="modal modal-fx-fadeInScale">
 
    <div class="modal-content modal-card">
        <div>
            <button class="modal-button-close delete" id="closecross" aria-label="close" style="float:right; margin-bottom: 20px;">Call Modal</button>
        </div>
        <section class="modal-card-body">
 
            <div class="content">
 
                <h1 class="has-text-centered">PRIVACY POLICY</h1>
 
                <p>1. This Privacy Policy is an integral part of Terms and Condition of Use and the User shall
                agree that he/she have read and understood and agreed to be bound by this Privacy
                Policy by accepting Terms and Conditions of Use and/or use/access any of Protranslate
                contents/services on the Platform. <br>
                2. This Privacy Policy contains terms of use, disclosure and collection of User information. <br></p>
            <div> 
        </section>
        <footer class="modal-card-foot">
            <button class="modal-button-close button is-success">Yes</button>
            <button class="modal-button-close button" id="closebtn">Close</button>
        </footer>
    </div>
</div>

    I assume the privacy policy is static. If not you would need to use Ajax to load content to the Model

    Whenever there's an href attribute HTML will redirect to the specified path. It's the expected behaviour unless of course, you use some javascript.

    All the best