28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton close dans modale Bootstrap 5

Bonsoir à tous,
Je n'arrive pas à comprendre pourquoi ma fenêtre modale n'affiche pas le btn "close" (NEWS) dans ma fenêtre modale.
Ci-dessous le HTML :
				<button class="navbar-toggler navbar-dark m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
<a class="btn btn-primary_height" href="#section1" data-bs-toggle="modal" data-bs-target="#my-modal">NEWS</a>
						</li>
						<a class="scrollTo" href="#section1">INTRO</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">SITES</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">STYLE</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">VIDEOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">PHOTOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">ME</a>
						</li>
					</ul>
				</div>

Merci pour votre aide,
P.
Modifié par PLGPPUR (10 Aug 2022 - 23:08)
Bonjour Yordi,
Merci pour votre réponse.
Le bouton est bien présent, mais ne figurait pas dans mon HTML Smiley rolleyes
CI-dessous un peu plus de code
<div id="my-modal" class="modal fade modal-fade" data-bs-keyboard="true" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <!-- bandeau images -->
          <div class="row align-items-end justify-content-around">
            <img class="col-6" src="http://lapagetest.fr//imgs/PamSoYou.jpg" alt="moi">
            <img class="col-6" src="http://lapagetest.fr//imgs/logo_lddc.png" alt="logo">
          </div>
          <!-- le contenu textuel -->
          <div>
            <h1>Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
							  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre
			  Un titre</h1>

          </div>
        </div>
      </div>
    </div>
    <!-- on place le btn de fermeture à la fin pour qu'il soit dessus -->
    <button type="button" class="btn-close my-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>

		<div id="menutop" class="menu">
			<nav class="navbar navbar-expand-sm p-0 m-0" aria-label="navbar">
			<div class="container-fluid p-0 m-0 align-items-start">

				<a href="#" class="navbar-brand"><img src="./imgs/logo_cut.png" alt="logo" ></a>
                
				<button class="navbar-toggler navbar-dark m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
<a class="btn btn-primarybis" data-bs-toggle="modal" data-bs-target="#my-modal">NEWS</a>
						</li>
						<a class="scrollTo" href="#section1">INTRO</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">SITES</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">STYLE</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">VIDEOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">PHOTOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">ME</a>
						</li>
					</ul>
				</div>

				</div>
			</nav>
		</div>

Bonne journée et merci,
P.
Modérateur
Elle doit au moins se trouver dans le div qui à la class modal-content.

Encore mieux (copier/coller de la documentation) avec le modal-header, et modal-title:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Meilleure solution
SUPER !!!
Merci !!! Résolu Smiley smile
Par contre, si je veux un font awesome à la place du btn ?
Nouvelle discussion ?
Encore merci !
P.
Modérateur
Sans avoir testé mais à mon avis, la class btn-close t'amène l'icône. Le fait de l'enlever devrait te donner un button vide. Ne te reste qu'à placer ton icon dans le button.
<button type="button" data-bs-dismiss="modal" aria-label="Close">
  <i class="fa fa-world"></i>
</button>


ps: je ne suis pas sur de l'évolution et de la nomenclature pour Font Awesome.

Bonne journée Smiley smile
Sujet clos
Aller à