Modal button disappears when using browser scroll

Asked

Viewed 109 times

1

I wanted to leave the modal button fixed at the top of the page, but when I use the scroll from the browser, the close button disappears, this only happens in one of the modals being that all 7 are exactly the same.

<div id="bg-egipcia" class="bg font-shadow">
        <div class="container">
            <span class="glyphicon-modal glyphicon glyphicon-plus-sign" data-toggle="modal" data-target="#modal-egito"></span>
            <p class="text-shadow-titulo bold egito">"...</p>
            <p class="text-shadow-titulo bold egito">...</p>
            <p class="text-shadow-titulo bold egito">...</p>
            <p class="text-shadow-titulo bold egito">.....</p>
            <p class="text-shadow-titulo egito" id="egito">.....</p>
        </div>
    </div>

    <div class="modal fade padding-modal-curiosidadaes" id="modal-egito" tabindex="-1" role="dialog">
        <div id="bg-sala-egipcia-modal" class="bg-modal modal-content">
            <div class="modal-content no-border-radius">
                <button class="close texte">
                    <span class="btn-egito ajuste-btn-curiosidades" aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body no-padding">
                    <div class="div-texto div-texto-egito col-xs-12  col-sm-6">
                        <p><strong class="strong-curiosidades">HISTÓRICO</strong><br></p>
                        <p>texto qualquer  texto qualquer texto qualquer  texto qualquer  <br><br></p>

                        <p><strong class="strong-curiosidades">MÍSTICA</strong><br></p>
                        <p>texto qualquer  texto qualquer texto qualquer  texto qualquer  <br><br></p>

                        <p><strong class="strong-curiosidades">PERFEIÇÃO</strong><br></p>
                        <p>texto qualquer  texto qualquer texto qualquer  texto qualquer  </p>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <img src="img/bg-curiosidades/img-hieroglifos.jpg" alt="hieróglifos">
                    </div>
                    <div class="div-texto div-texto-egito col-xs-12  col-sm-6 col-md-3">
                        <p><strong class="strong-curiosidades">HIERÓGLIFOS</strong><br></p>
                        <p>texto qualquer  texto qualquer texto qualquer  texto qualquer  </p>
                    </div>
                    <div class="div-texto div-texto-egito col-xs-12 col-sm-6">
                        <img class="ajuste-img-egito" src="img/bg-curiosidades/img-egito.jpg" alt="img-egito">
                        <p><strong class="strong-curiosidades">IMORTALIDADE</strong><br></p>
                        <p>texto qualquer  texto qualquer texto qualquer  texto qualquer  </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
html css bootstrap modal

  • I couldn’t run your HTML, even with Boostrap, I could post the executable code to Fiddle to see if I can help you?

  • Try viewing the code in the fiddle via this link https://jsfiddle.net/2d9uxyma/1/? utm_source=website&utm_medium=embed&utm_Campaign=2d9uxyma

1 answer

-1


I managed to solve.

I put a "a" tag that arrow the href to the top of the page.

  • 1

    Hi Lucas, that cool that you solved your problem. Could put the code snippet with the tag a used for other people facing the same type of problem?

  • <a id="qualquer_id" href="qualquer_id">Modal test</a>

  • this is the one that opens the modal

Browser other questions tagged html css bootstrap modal

You are not signed in. Login or sign up in order to post.