J'essaie de définir l'arrière-plan de mon modal d'amorçage qui a le scénario suivant, j'ai des images changeant dynamiquement qui seront affichées comme image d'arrière-plan du modèle Ces images sont récupérées en effectuant un appel REST à getFile/getImage (l'appel REST récupère les images du système de fichiers). Lorsque j'utilise quelque chose comme ceci (code ci-dessous) dans un fichier Html dans n'importe quelle balise div, cela fonctionne bien

<img style="width: 100%" src="getFile/getImage/dynamicBikeImage" alt="Dynamic Bike Image">

Mais lorsque j'utilise le même pour définir l'arrière-plan de mon modal à l'aide de javascript, cela échoue.

Voici le code que j'ai essayé

$('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(getFile/getImage/dynamicBikeImage)'});

J'ai aussi essayé de faire un appel ajax quelque chose comme ça

$.ajax({
        url: "/getFile/getImage/dynamicBikeImage",
        type: 'GET',
        success: function(res) {

            $('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(getFile/getImage/dynamicBikeImage)'});
        }
    });

La chose déroutante est que si j'utilise une image présente dans le dossier statique, cela fonctionne comme prévu, par exemple.

$('#bikeModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(static/images/bikebg.jpg)'});

Voici un instantané pour mieux visualiser ce que j'essaie de réaliser (ce qui a été réalisé en utilisant l'image dans le dossier statique de l'espace de travail)

enter image description here

0
Supager 22 janv. 2020 à 10:13

1 réponse

Meilleure réponse

Vous cherchez une solution comme celle-ci ? Essayez de mettre l'URL de l'image entre guillemets.

function setbackgroundformodalcontent() {
    $('#myModal .modal-content').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("https://cdn3.iconfinder.com/data/icons/business-258/64/_Team_Work-512.png")'});
};

function setbackgroundformodal() {
    $('#myModal').css({'background-size':'100%, 100%','background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("https://cdn3.iconfinder.com/data/icons/business-258/64/_Team_Work-512.png")'});
};
<link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
    <h2>Modal Example</h2>
    <!-- Button to Open the Modal -->
    <button
    type="button"
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#myModal"
    >
    Open modal
    </button>

    <button onclick="setbackgroundformodalcontent()">Set Background For Modal</button>
    <button onclick="setbackgroundformodal()">Set Background For Modal Behind</button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">
            &times;
            </button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
            Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
            Close
            </button>
        </div>
        </div>
    </div>
    </div>
</div>
2
Nitheesh 22 janv. 2020 à 07:55