Modalità Bootstrap: lo sfondo salta in alto quando si attiva / disattiva

111

Ho un problema, con un modale. Ho un pulsante su una pagina, che alterna il modale. Quando viene visualizzato il modale, la pagina salta all'inizio.

Ho fatto tutto il possibile per trovare una soluzione / ecc, ma mi sono davvero perso.

MODIFICARE:

Ho provato anche con: $('#myModal').modal('show');ma ha lo stesso identico effetto.

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
fonte
Ciao Benni. Sì, lo sono con aria di sfida. Ho anche provato con: $ ('# myModal'). Modal ('show'); ma ha lo stesso identico effetto.
— FooBar
1
questo può aiutarti, stesso problema: stackoverflow.com/questions/12894570/…
— Mark
@Mark, vedi la mia risposta qui sotto ...
— Ravimallya
Ho notato che se clicco in un punto qualsiasi windowdella finestra il modale si attiva. Sembra strano e inaspettato. Ho rimosso buttonvia devtools e facendo clic in un punto qualsiasi della pagina ho comunque aperto la finestra modale. Era questo il comportamento desiderato? Mi chiedo se non hai il selettore giusto per l'evento clic modale.
— dward

Risposte:

174

Quando il modale si apre, una modal-openclasse è impostata sul <body>tag. Questa classe si imposta overflow: hidden;sul corpo. Aggiungi questa regola al tuo foglio di stile per sovrascrivere lo stile bootstrap.css:

body.modal-open {
    overflow: visible;
}

Ora la pergamena dovrebbe rimanere al suo posto.

— pstenstrm
fonte
@pstenstrm, ho un dubbio. hai detto di sovrascrivere il css per la classe .modal-open. Ma cosa succede se ci sono div di chiusura extra e nella mia risposta, non ho sovrascritto nessuna classe nella mia risoluzione? Funziona bene dopo aver rimosso 2 div in più. bs modal che aggiunge .modal-background div che verrà confuso dove doveva essere chiuso a causa di tag di chiusura extra.
— Ravimallya,
4
Non funziona per me, ho il modale all'interno di un iframe e scorre verso l'alto ... qualche idea?
— Cabuxa.Mapache
5
Questo ha risolto il problema per me. Solo per aggiungere la radice del mio problema era "body {height: 100%}".
— PeteG
23
Non funziona per me. Ho un modal vaniglia con cui sto aprendo .modal('show')e scorre ancora fino all'inizio della pagina. Bootstrap v3.2.0
— MandM
6
Ho dovuto aggiungere qualcosa position: inherita questo corso, ma dopo ho funzionato a meraviglia.
— adrian3martin
28

Se stai chiamando modal con tag. Prova a rimuovere "#" dall'attributo href e chiama modal con attributi di dati.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Gokhan
fonte
Lo apro esattamente come l'hai postato lì. Controlla il link
— FooBar
5
se non usi il "<button>" ma <a>, come nel mio caso, perdi l'icona "finger button" quando sposti il ​​cursore del mouse sull'oggetto. Per ovviare a questo, ho fatto così: ... href = "# mai_modal_id" data-toggle = "modal" ... e non ho usato data-target
— pagurix
3
@pagurix - Il tuo commento ha funzionato meglio per il mio scenario.
— AlfredBr
Penso che @pagurix dovrebbe scrivere il suo commento come risposta separata. L'unica cosa che ha aiutato. Pollice su!
— Vibhor Dube
14

se stai usando un anchor tag <a href"#" ..> ... </a>e stai href="#"creando problemi, rimuovilo. Puoi leggere di più qui

— Nimesh Jain
fonte
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Questo ti aiuterà a fermare la barra di scorrimento in alto. Ha funzionato per me

— Georgi Mirchev
fonte
5

Possibilmente lavorando con modali annidati da qualche parte nel codice:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Per me è stata una combinazione di posizione, altezza e overflow.

— Dennis Heiden
fonte
4

Non vedo un errore specifico, ma ti consiglio di controllare la tua sintassi html .

Un piccolo test con la tua fonte mi dà errori come

Riga 127, Colonna 34: Div. Elemento non chiuso.

              <div class="inner onlySides">

Questo potrebbe essere un problema.

— billyJoe
fonte
Grazie - esaminerò questo aspetto - anche se trovo difficile credere che questo possa innescare il problema che sto riscontrando. Sembra che tu stia utilizzando un plug-in per tenerne traccia, se è così; quale?
— FooBar
non uso plugin eccetto firebug. È sempre una buona cosa controllare la validità della tua pagina su validator.w3.org . Sarebbe un problema perché se hai un div non
— chiuso
4

Il modo più semplice per risolvere lo sfondo del salto è definire due parametri:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
fonte
3

Ho provato a replicare questo problema sul mio localhost e per quanto strano possa sembrare, c'è un conflitto con il file Bootstrap JS che stai utilizzando.

Prova a commentare il tuo codice di:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

E invece usa Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Questo ha funzionato per me.

L'ho provato con Bootstrap versione 3 ma non ha funzionato. Non sono ancora in grado di individuare la parte problematica, ma da qualche parte Firebug mi ha e.preventDefault() is not a functiongenerato un errore: immagino che questa dovrebbe essere la causa principale, ma devo ancora confrontarla con gli altri file JS.

— AyB
fonte
3

Ho provato a impostare .modal in alto al centro dello schermo. 

.modal {
    position: absolute;
    top: 50%;
}

Solo i miei 2cents di pensieri.

— Holger Thiebosch
fonte
Abbastanza vicino. Non downvote perché il mio problema potrebbe essere altrove, ma ciò ha causato l'oscuramento della metà inferiore dello schermo, ma il modale era posizionato verso il centro.
— crafter
3

In bootstrap 3.1.1 ho risolto con questa soluzione:

body.modal-open {
    position: absolute !important;
}
— Filo
fonte
2
Mi hai salvato la giornata @Filo Grazie mille
— vinothini
2

hai 2 divtag di chiusura extra subito prima del <div id="footer">o dopo il <div id="mainFrame" class="group">div. Sto usando Visual Studio 2012 Express per ispezionarlo.

Rimuovi questi 2 div aggiuntivi e facci sapere come funziona. Ho rimosso div in più e rimosso tutti gli script personalizzati. mantenuto solo jquery core e bootstrap a piè di pagina. ecco lo sreenshot dell'output finale. ecco il parco giochi jsbin per te che funziona bene.

Ti suggerisco di usare headjs per caricare tutti gli script e i file css. inoltre non è una buona pratica caricare due volte gli script.

inserisci qui la descrizione dell'immagine

— Ravimallya
fonte
4
le risposte sottovalutate richiedono commenti adeguati con motivazioni.
— Ravimallya
2

Prova a usarlo per aprire modal e guarda cosa succede:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— scooterlord
fonte
2 
body.modal-open {
overflow: visible !important;
}

Avevo bisogno dell'attributo importante per risolverlo

— Dizzle
fonte
Questo ha funzionato per me, e ho avuto il problema di @ MandM (nei commenti) dalla risposta di pstenstrm: "Non funziona per me. Ho un modal vanilla che sto aprendo con .modal ('show') e continua a scorrere all'inizio della pagina. Bootstrap v3.2.0 ". L'unico effetto strano che ha è che ora lo sfondo scorrerà se continui a scorrere un modale che è più alto della finestra, ma questo è un problema minore per me. Grazie.
— dgig
1

Ho avuto lo stesso problema usando Bootstrap 2.3.2

Si è verificato un problema durante il clic su un collegamento:

Il trucco era: restituire falso;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

e il js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
fonte
1

Ho passato ore a provare tutto qui e altrove. Per l'utilizzo del materiale angularjs, si è scoperto che dovevo disabilitare l'animazione sull'oggetto di configurazione uibModal.open arg.

Per esempio:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Spero che questo aiuti qualcun altro.

— Nathan Beach
fonte
1

Se stai affrontando questo problema in un programma Angular, aggiungi il codice seguente alla prima riga del file .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— panda sibashankar
fonte
0

Ho avuto lo stesso problema e penso di averlo capito. Hai solo bisogno di posizionare l'HTML modale come figlio diretto del tag body ! Tuttavia, puoi inserire il codice HTML per il pulsante che attiva il modale ovunque ti serva. Credo che questo eviti l'ereditarietà CSS e i problemi di posizione che innescano questo problema.

Esempio:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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>
</body>
— nunoarruda
fonte
0

Finalmente ho capito questo. NON racchiudere il pulsante che mira al modale in un tag di ancoraggio.

Male

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Buona

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
fonte
0

Questo l'ha fatto per me

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— warkitty
fonte
Ho riscontrato un problema simile con la barra di navigazione e il salto del contenitore quando è stato aperto il modale. Questo è quello che stavo cercando.
— Awhitey98
Sono contento che abbia aiutato!
— warkitty
0

Dopo aver letto dozzine di risposte in diverse ore, ho copiato di nuovo il codice originale dal file bootstrap e ho eseguito il debug passo dopo passo per vedere cosa ha causato che salgo sempre all'inizio. Perché l'ultima versione attuale di Bootstrap 3 mostra il modale nella posizione in cui ti trovi in ​​questo momento. L'avevo scoperto -webkit-transform: translate3d(0,0,0);e height: 100%nel mio body tag CSS ha causato questo comportamento. Forse questo aiuta qualcuno.

— AlexioVay
fonte
0

Per me funziona quando ho cambiato la versione da 3.1.1 a 3.3.7

Se non è necessario utilizzare la versione 3.3.1, provare a sostituire.

Dopo la modifica, è bene verificare che il resto della funzione funzioni correttamente.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— pyot
fonte
0

body.modal-open { position: inherit; }

Questo ha funzionato come un fascino per me.

— Nimish goel
fonte
0

Ho provato tutti gli esempi precedenti: questa è l'unica cosa che ha funzionato per me:

.modal-open {

            padding-right: 0 !important;

        }

Rimuovere l'imbottitura dal lato destro del modello - impedisce il salto.

— Stnfordly
fonte
0

altezza: 100% risolve il problema, ma devi aggiungere il "div" corretto

— Anar Ali
fonte
0

Ho avuto lo stesso problema e nessuna delle risposte mi ha aiutato. Ho trovato una soluzione alternativa che sembra stupida ma funziona almeno nel mio caso.

Ho scoperto che la pagina scorre verso l'alto solo una volta e dopo che le successive modali aperte funzionano come previsto. Poi ho scoperto che nascondere qualsiasi elemento nel DOM avvia lo stesso strano scorrimento. Quindi ho solo creato un div fittizio dopo il caricamento della pagina piuttosto che nasconderlo e rimuoverlo e questo ha risolto il problema.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Borzilo Andrey
fonte
0

Stavo affrontando lo stesso problema. Il problema era che stavo aggiungendo la classe .modal-open agli elementi html e body. Basta aggiungere questa classe al corpo e tutto funzionerà come previsto.

— general666
fonte
-1

Prova questo funziona perfettamente

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— minimit
fonte
-3

Se la risposta di pstenstrm non funziona, prova a combinarla con questo pulsante sostitutivo HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Questo dovrebbe mantenere il pulsante sullo schermo.

— Ben
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.