Forum : BOOTSTRAP Modal

Bonjour,

J'ai créé une modale avec Bootstrap. Elle doit m'agrandir une div pour un soucis d'affichage en réunion, afin de se focaliser uniquement sur le contenu de celle ci. Cependant, ce qui se trouve dans mes balises modales ne s'affiche que lors de l'execution de la modale. Comment faire pour que l'affichage soit présent aussi bien sur la page normale que lorsque la modale s'éxécute ? La seule solution que j'ai trouvé à l'heure actuelle est d'écrire 2 fois le contenu : dans la modale et en dehors.
Le code :

<i class="fa fa-search-plus box-icon zoombox" data-toggle="modal" data-target="#A11" id="ZA1" title="" style="margin-right:10px;"></i>
<!-- Le modal -->

                            <div class="modal fade" id="A11" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="panel-body" id="A1">
                                                <p>- Liens internes</p>
                                                <p>- Liens notes</p>
                                                <p>- LDA</p>    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

sytrys59

Auteur

Réponse acceptée

C'est bon, ça fonctionne. Merci :p

jean-smaug

Tu peux nous montrer ton code JS/jQuery stp :)
Si tu as copié les modal bootstrap de la doc, c'est normal qu'elles soient cachées

sytrys59

Auteur

J'ai édité le sujet initial. Et pour info il n'y a pas de JS simplement l'utilisation des classes fournies
Mais le soucis reste le même. Il y a un attribut à modifier ?

jean-smaug

Si tu veux eviter de dupliquer ton code HTML, le js me parait la meilleur soluce :)

En js tu pourrais cloner ton élément HTML et l'inserer dans une modale lorsque tu le souhaite.

sytrys59

Auteur

J'ai pas le niveau pour le faire. Je vais quand même essayer de me renseigner :)
C'est pas le fait de devoir dupliquer mon code qui me gêne. C'est le fait de devoir dupliquer tout le PHP quand je le ferai .. ^^

jean-smaug

Exemple très très succinct : https://jsfiddle.net/the_smaug/mL9cjkp3/5/

A adapter a ton cas mais ca fonctionnera.
Regarde un tuto de jQuery ca répondra a tes attentes :)

NB : avec bootstrap 3 il faut jQuery 1.x uniquement

sytrys59

Auteur

J'ai modifié le html en laissant la structure du modal sans le contenu (donc il n'y a rien dans modal-body). J'ai adapté le code jquery que tu m'as donné. Mais ca ne fonctionne pas : le contenu reste vide..

$("#ZA1").on('click', function(){
    var cloneText = $("#A1").clone()[0].textContent;
    $("#content-modal-A1")['0'].textContent = cloneText;
});

jean-smaug

re,
dans le code HTML que tu as mis plus haut, il n'y a pas de #content-modal-A1 ^^

Au pire envoie tout ce que tu peux HTML, JS et retour de la console de ton navigateur :)

BOOTSTRAP Modal

8 réponses