使用 Laravel 在 bulma 中加载模态时出现问题

Question

我在一个页面上有一个 link 转到另一条路线，点击时我想打开模式。我在 Laravel 中使用 bulma。当前，当单击它时，它会转到该路线，并且会显示普通的 html 而不是预期的模态。任何帮助表示赞赏。这是我的代码。

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>

隐私-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>

Answer 1

我发现您的代码示例存在多个问题

参考 - 在下面的代码中，您想要启动具有 ID launchModal 的元素，但您的按钮没有 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>

交换headers和JS 将 JS 和导入添加到索引
包括模态

所以你的代码应该是这样的

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>

我假设隐私政策是静态的。如果不是，您需要使用 Ajax 将内容加载到模型

只要有 href 属性 HTML 就会重定向到指定路径。这是预期的行为，当然，除非您使用一些 javascript.

祝一切顺利

使用 Laravel 在 bulma 中加载模态时出现问题

Problem with loading modal in bulma with Laravel

php

laravel

bulma