jquery - index - select2 js modal

bpopup no funciona+mostrar en la carga de la página

Question

Soy muy novato en jquery y todo sobre eso. Estoy haciendo solo una página ad hoc, así que me perdí. Necesito mostrar iframe como y popup. ¿Cómo hacerlo?

Intenté bpopup:

index.html es como:

<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Content of popup
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bpopup.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/scripting.min.js"></script>

Y de acuerdo con la página de inicio de bpopup modifiqué jquery.bpopup.min.js

// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$(''#my-button'').bind(''click'', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$(''element_to_pop_up'').bPopup({
content:''iframe'', //''ajax'', ''iframe'' or ''image''
contentContainer:''.content'',
loadUrl:''http://dinbror.dk/search'' //Uses jQuery.load()
});
});
});
})(jQuery);

y utilicé la configuración CSS predeterminada como:

#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}

Ahora lo extraño. Hay una configuración js predeterminada como $(''#element_to_pop_up'').bPopup(); que realmente funciona, muestra una ventana emergente simple luego de hacer clic en el botón. Pero cuando uso la configuración de Iframe (como arriba), nada está sucediendo. Nada. ¿Por qué? Estoy tan confundido con eso.

El objetivo es mostrar la ventana emergente cuando se carga la página. He visto varias pistas, pero ninguna de ellas funciona. ¿Qué archivo modificar y cómo?

Si sabes cómo ayudar, dímelo. Solo que no olvides que soy como un niño pequeño que está aprendiendo a caminar. Así que no se salte ningún detalle como "cordones de corbata". Gracias más que mucho

Answer 1

Hay un par de cosas para verificar. Primero, abra las herramientas de desarrollo de Chrome y mire la consola. Vea si está recibiendo algún error al hacer clic en su botón.

Segundo, revisa la pestaña Red y asegúrate de que todo se esté cargando correctamente.

¿Puedes publicar el código que realmente funciona para que podamos ver qué es diferente?

Answer 2

<div id="element_to_pop_up">
<a class="b-close">x<a/>
<div class="content">
Content of popup
</div>
</div>

solo agregue un div adicional con el "contenido" de la clase. Deberia de funcionar.

Answer 3

De acuerdo. Sé la respuesta a esto. El problema es porque copió y pegó el código de su sitio y hay algo mal en él.

Mire de cerca el identificador del elemento en esta línea:

$(''element_to_pop_up'').bPopup({.....

NO PUSIERON EL # antes del elemento_para_pop_up. Se supone que es

$(''#element_to_pop_up'').bPopup({.....

después de eso tu código debería funcionar

Answer 4

Intente agregar la biblioteca "jquery-1.10.2.js" a su página o la última versión de la misma.