Estoy usando twitter bootstrap y ventanas emergentes.

Me estoy enfrentando el siguiente problema: cuando el usuario hace clic en un enlace que abre una ventana emergente en la parte inferior de la página, que se desplaza por todo el camino hasta la parte superior de la página. Esto requiere que el usuario desplazarse hacia abajo para ver la ventana emergente abierta. En las demostraciones de la twitter-bootstrap sitio, no veo esto y me preguntaba si me podría obtener ayuda sobre este tema.

<div class="span1" style=" width: 60px; ">
    <a href="#" class="example2" rel="popover" data-html="true" data-placement="left" data-content="&lt;a href = '/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas'&gt;&lt;img src='http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg'&gt;&lt;/a&gt;" data-original-title="Bhangra indian Jingle Bells balle balle Merry Christmas">
        <img src="http://graph.facebook.com/1236870349/picture">
    </a>

    <div class="popover fade left in" style="top: 831px; left: 805.61669921875px; display: block;">
    <div class="arrow"></div>
    <div class="popover-inner">
        <h3 class="popover-title">Bhangra indian Jingle Bells balle balle Merry Christmas</h3>
        <div class="popover-content">
            <p><a href="/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas"><img src="http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg"></a></p>
        </div>
    </div>
</div>
InformationsquelleAutor sharataka | 2012-12-07

5 Comentarios

  1. 37

    Que parezca que tienen ahora para evitar el comportamiento por defecto del enlace debido a que se agregó la opción para mostrar la ventana emergente en hover/focus. Ahora mismo el enlace activar y desde el href apunta a «#» va a llevar a la parte superior de la página. Antes de que en versiones anteriores, se utiliza para prevenir este defecto automáticamente.

    El código javascript debe ser algo como esto:

    <script>
    $("a[rel=popover]")
        .popover()
        .click(function(e) {
            e.preventDefault();
         });
     </script> 

    Con html como este

    <a href="#" 
       class="btn btn-large btn-danger" 
       rel="popover" 
       data-content="And here's some amazing content. It's very engaging. right?" 
       data-original-title="A Title">
         Click to toggle popover
     </a>

    Aquí es un trabajo JSfiddle. http://jsfiddle.net/hajpoj/KPU47/7/

    Edición: Alternativamente, usted podría usar un div en lugar de una etiqueta de anclaje y no tener que hacer todo el impedir por defecto cosa.

    <div 
       class="btn btn-large btn-danger popover-link"
       data-content="And here's some amazing content. It's very engaging. right?"
       data-original-title="A Title">Click to toggle popover
    </div><script>
        $(".popover-link").popover();
    </script>
  2. 11

    He encontrado exactamente el mismo problema con la ventana emergente y fue suficiente para reemplazar a href=»#» con href=»javascript://».

    • Esto funcionó a la perfección. Gran solución.
    • Se hace el trabajo, pero tratando de entender por qué… Esto parece un poco chapucero?
    • Sólo evita que el comportamiento por defecto del navegador de ejecutar el código js, de forma más sencilla que la de uno con jquery evento click. Puede ser chapucero, pero en mi opinión no es en absoluto.
  3. 2

    Solo tiene que utilizar este código. Sin div, class o cualquier otra cosa que se necesita.

    $("a[data-toggle=popover]").popover().click(function(e) {
            e.preventDefault();
    });
  4. 1

    Muy similar a lo que @hajpoj dijo, excepto que es el fin de lo que importa. Así, esta es una forma original de hacerlo porque no se puede agregar dinámicamente .popover elementos de la página y va a seguir trabajando.

    JS:

    $('body').on('click', 'a[rel=popover]', function(e) {
      e.preventDefault();
      return;
    }).popover({
      selector: 'a[rel=popover]'
    });

    HTML:

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus nisi. Nulla facilisi. In bibendum ultricies ultrices. Pellentesque sagittis, purus non venenatis mollis, nulla risus fermentum nisi, eget vulputate nulla felis nec mi. Donec rutrum
      nisi sed turpis pulvinar non fermentum risus fringilla. Ut sapien tellus, venenatis sit amet venenatis quis, rhoncus et nulla. Nam augue nisl, consequat vitae convallis sit amet, egestas at ante. Aliquam fringilla viverra porttitor.
    </p>
    <p>
      Aliquam ornare suscipit posuere. Phasellus ac turpis vitae elit sollicitudin condimentum. Duis massa purus, porttitor sed cursus eu, lacinia at velit. Nam ullamcorper mi ac sapien pretium mollis. Curabitur ante elit, euismod eget elementum condimentum,
      semper a dui. Pellentesque luctus orci elit, ut mattis dolor. Quisque semper nisl eu enim cursus consectetur a in elit. Phasellus faucibus gravida elit vel lobortis. Donec vitae nisi ut libero sollicitudin sodales pretium at purus. Praesent vulputate
      dignissim pulvinar. Nunc sit amet mauris a arcu pulvinar aliquam. Vivamus varius nisl elementum dolor posuere volutpat. Maecenas sed lectus tortor. Aenean sit amet dapibus arcu.
    </p>
    <p>
      Aliquam posuere sagittis viverra. Aenean velit lorem, vehicula quis viverra vel, porttitor at est. Curabitur at molestie tortor. Quisque at justo eu lacus accumsan aliquam. Ut auctor dui et augue posuere eleifend. Aliquam erat volutpat. Nunc enim enim,
      ullamcorper at scelerisque eu, cursus sit amet lectus. Quisque ac augue erat, vitae tempus diam. Nunc at erat pulvinar lectus vestibulum congue. Vivamus lorem leo, tristique non tempus a, laoreet sit amet ligula. Maecenas tristique vulputate ante, nec
      aliquet enim lobortis vel. Morbi convallis quam sed tellus consectetur hendrerit. Vestibulum vel elit at risus tempor posuere. Vivamus ultricies molestie feugiat. Sed iaculis eros massa. Mauris ac nunc orci.
    </p>
    <p>
      Aliquam erat volutpat. Pellentesque volutpat iaculis tortor vel hendrerit. Cras sapien orci, fermentum id molestie vel, feugiat in tortor. Quisque vitae felis non tellus volutpat aliquet luctus sit amet felis. Pellentesque gravida tempus turpis, eu lobortis
      eros rutrum eu. In malesuada ultrices leo, eu pretium quam molestie quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac risus eros. Ut posuere lobortis magna, at blandit mauris tristique ut. Suspendisse
      volutpat mollis elit non sagittis. Nam in dictum felis. Maecenas dolor turpis, aliquet vel vestibulum vel, hendrerit non tortor. In pharetra nulla nec arcu rutrum ut commodo tortor facilisis. Curabitur congue feugiat felis vel sollicitudin. Proin in
      mollis dolor. Nulla mattis, turpis vestibulum vehicula blandit, tortor neque posuere diam, sed tempus neque odio id diam.
    </p>
    <p>
      Vestibulum non quam et elit consequat pellentesque sed at leo. Pellentesque iaculis, purus sit amet cursus imperdiet, orci mi consectetur sapien, sed sodales dui lectus vel enim. Curabitur ac arcu at lectus dictum luctus. Duis et aliquet eros. Suspendisse
      mi mi, porta at elementum pulvinar, pulvinar eu elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce molestie mollis neque, et elementum odio dapibus sed. Nulla blandit sollicitudin quam semper dictum.
      Pellentesque rutrum rhoncus lacus et facilisis. Sed mattis felis sit amet neque viverra ullamcorper. Fusce volutpat quam scelerisque nisi dignissim vel congue nulla sodales.
    </p>
    
    
    <a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">
        Click to toggle popover
    </a>

  5. 1

    agregar onclick=»return false;» a su vínculo; se evita que el navegador después de la «#» link:

Dejar respuesta

Please enter your comment!
Please enter your name here