bootstrap fenêtre modal ne s'affiche pas correctement

Par houssem, il y a 10 ans

Les bases HTML/CSS

salut
j'ai essai de faire une fenetre modal avec bootstrap mais j'ai eu ce resultat et j'ai pas trouver une solution
merci d'avance

10 réponses

betaWeb, il y a 10 ans

Salut,

SI tu ne nous donnes pas ton code on va avoir du mal à t'aider. Visiblement la structure HTML de la modal est mal respectée. Je te renvoie à la documentation de Bootstrap pour regarder d'où peut venir ton erreur.

houssem, il y a 10 ans

voici mon code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}Yorozuya Fansub{% endblock %}</title> {% block stylesheets %} {# On charge le CSS de bootstrap depuis le site directement #} {% stylesheets 'c:/wamp/www/symfony/web/css/9134ad3.css' filter='cssrewrite' %} <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen"/> {% endstylesheets %} {% endblock %} <style> </style> </head> <body> <FONT face="arial"> <CENTER> <h1><B><FONT COLOR="#F8F8FA"><A HREF="{{ path('sn_sys_news_home') }}"style="text-decoration:none"><FONT COLOR="#08C03C">YOROZUYA FANSUB</A></B></h1> </CENTER> <div class="container"> <div class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Yorozuya Fansub</a> </div> <ul class="nav navbar-nav"> <li class="active"> <A HREF="{{ path('sn_sys_news_home') }}">ACCEUIL </A></li> <li> <A HREF="{{ path('sn_anime_home') }}">ANIME </A></li> <li><a href="#">Team</a></li> </ul> <form class="navbar-form navbar-right "> <div class="form-group"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}<a href="{{ path('fos_user_security_logout') }}" style="text-decoration:none"><FONT COLOR="#0000FF">DÉCONNECTION</a>{% else %}<a data-toggle="modal" href="{{ path('fos_user_registration_register') }}" data-target="#formulaire" style="text-decoration:none"><FONT COLOR="#E97406">INSCRIPTION</a> <a href="{{ path('fos_user_security_login') }}"style="text-decoration:none"><FONT COLOR="#0000FF">CONNEXION</a>{% endif %} <div class="modal fade in" id="formulaire" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> </div> </div></div> </div> </form> </div> </div> {% block body %} {% endblock %} <footer class="row col-sm-12"> <div class="panel panel-body"> <p><center><font color=blue>Yorozuya Fansub cree en 2015 © {{ 'now'|date('Y') }} Tous droits réservés .</center></p> </div> </footer> </div> {% block javascripts %} <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> {% endblock %} </body> </html> {% trans_default_domain 'FOSUserBundle' %} <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h4 class="modal-title">Inscription :</h4> </div> <div class="modal-body"> <form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register"> {{ form_widget(form) }} <div> <input type="submit" value="{{ 'registration.submit'|trans }}" /> </div> </form></div>
betaWeb, il y a 10 ans

Ca donne quoi une fois compilé ? Je ne connais pas Twig.

houssem, il y a 10 ans

l'image que j'ai publie lorsque je click sur inscription une fenetre modal s'affiche le probleme elle reste dans la partie sombre

betaWeb, il y a 10 ans

CSS:

.modal{ z-index: 10000; }
Benjamin Derepas, il y a 10 ans

Le z-index de ta div qui cache doit être supérieur au z-index du corps du site, et le z-index de la boite modal elle même doit être supérieur à la div qui cache.

PS : On est en 2015 , évites les <FONT face="arial"><CENTER><h1><B><FONT COLOR="#F8F8FA">, surtout en utilisant Bootstrap

betaWeb, il y a 10 ans

C'est vraiment du bricolage à ce niveau là. Tu devrais reprendre ton projet afin de le refactorer proprement.

betaWeb, il y a 10 ans

@Benjamin Derepas +1

houssem, il y a 10 ans

merci de votre aide le probleme j'ai utilise 2 version de bootstrap different

Benjamin Derepas, il y a 10 ans

Encore moins recommandé ...