Ouverture d'une modal bootstrap
Bonjour,
Je suis novice dans le développement web et j'essaye actuellement d'utiliser le composent "modal" qu'offre bootstrap.
Actuellement j'arrive à l'utiliser "à peu pres", j'arrive à ouvrir ma model comme cela :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <article class="col-md-4 isotopeItem code">
<div class="portfolio-item">
<img src="img/portfolio/img1.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info">
<h5><a href="#">Google Map</a></h5>
<a href="#MaModal1" role="button" class="btn" data-toggle="modal""><i class="fa fa-plus fa-2x"></i></a>
</div>
</div>
</div>
</article>
<!-- Modal -->
<div class="modal fade" id="MaModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal --> |
Mais j'aimerai ouvrir cette modal en pointant mon href vers un autre fichier html qui contient juste le code (<!-- Modal -->) de ma modal :
Code:
<a href="modals/MaModal1.html" role="button" class="btn" data-toggle="modal""><i class="fa fa-plus fa-2x"></i></a>
Si je met juste le code de ma modal dans MaModal1.html, ça m'affiche donc une nouvelle page html (ce que je ne veux pas je veux que la modal s'affiche sur ma page actuelle), ce qui parait normal, il doit me manquer une référence vers un code javaScript du genre :
Code:
1
2
3
| $(document).ready(function(){
$("#myModal").modal('show');
}); |
Mais je dois avouer que je ne sais pas bien l'utiliser.
merci pour votre aide.
