Forum : bootstrap fenêtre modal ne s'affiche pas correctement

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

Auteur

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

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

houssem

Auteur

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

CSS:

.modal{ z-index: 10000; }

Benjamin Derepas

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

@Benjamin Derepas +1

houssem

Auteur

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

Benjamin Derepas

Encore moins recommandé ...

betaWeb

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

bootstrap fenêtre modal ne s'affiche pas correctement

10 réponses