Salut à tous,

J'ai un souçi pour ouvrir une fenêtre modal. J'ai récupérer le script d'un modal avec bootstrap,  mais mon problème se situe au niveau du lien.

Le plus simple aurait été de faire un include avec le script du modal sur la même page que le lien,  mais en  intégrant bootstrap.css cela déforme le site.

En clair je voudrais ouvrir une fenêtre modal à partir d'un lien qui n'est pas sur la page script  du modal et qui s'ouvrirait sur la page du lien.

<!-- Page contenant le lien -->
<a href="contact.html" data-toggle="modal" data-target="#contactModal">Contact<</a>

Et puis...

<!-- Le script du modal sur la page "contact.html"-->

   
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
		
		 
    	
   <a href="#contactModal" role="button" data-toggle="modal" class="btn btn-default btn-lg"><i class="fa fa-contact "></i> <span class="network-name">Contact</span></a>   

 <!-- Modal -->
        <div id="contactModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" style="margin-top:120px;" >
       
        <img onload="fadeIn(this)" src="imsite/logochrome.jpg" alt="logochrome" style="display:none; position:absolute; z-index:2; margin-left:980px; margin-top:110px;">
        
            <div class="modal-dialog modal-lg" style="border-style:solid; border-radius:5px; border-width:thin; border-color: #7e0101; padding: 4px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" style="font-family: ArturoTrial-ExtraBold, Arial, bold;">CONTACT</h4>
                    </div>
                    <div class="modal-body">
                        <div class="containter">
                            <div class="row">
                                <form class="form-horizontal" name="commentform" method="post" action="send_form_email.php">
                                    <div class="col-xs-8">
                                        <div class="form-group">
                                            <label for="InputName" class="col-lg-4 control-label">Name</label>
                                            <div class="col-lg-8">
                                                <input type="text" class="form-control" name="first_name" id="first_name" required>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="InputEmail" class="col-lg-4 control-label">Email</label>
                                            <div class="col-lg-8">
                                                <input type="email" class="form-control" id="email" name="email" required>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="InputMessage" class="col-lg-4 control-label">Message</label>
                                            <div class="col-lg-8">
                                                <textarea name="comments" id="comments" class="form-control" rows="5" required></textarea>
                                            </div>
                                        </div>
                                        
                                        <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right"  style="color:#7e0101">
                                    </div>
                                </form>
                                
                            </div>

                        </div>
                    </div><!-- End of Modal body -->
                </div><!-- End of Modal content -->
            </div><!-- End of Modal dialog -->
        </div><!-- End of Modal -->
        

-
Edité par jcgleine 18 mars 2018 à 23:47:47