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
JavaScript
x
<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
JavaScript
<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>Advertisement
Answer
I see multiple issues with your code samples
- References – In the below code you want to launch the element with an ID launchModal but your button does not have an ID
JavaScript
privacy-policy.blade.php $("#lanuchModal").click(function() { $(".modal").addClass("is-active"); }); index.blade.php <a href="{{route('privacy-policy'}}" target="_blank">privacy policy</a>Swap the headers and JS Add the JS and Imports to Index
Include the modal
So your Code should be like this
index.blade.php
JavaScript
<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
JavaScript
<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