0

¿Cómo puedo crear un modal que contenga imágenes (como un popup para compartir un enlace)?

ya busque en la documentación de UI Bootstrap pero no logré que me muestre la ventana modal.

Éste es el código JavaScript:

 DCApp.directive("modalShow", function ($parse) {
      return {
          restrict: "A",
          link: function (scope, element, attrs) {

              //Hide or show the modal
              scope.showModal = function (visible, elem) {
                  if (!elem)
                      elem = element;

                  if (visible)
                      $(elem).modal("show");                     
                  else
                      $(elem).modal("hide");
              }

              //Watch for changes to the modal-visible attribute
              scope.$watch(attrs.modalShow, function (newValue, oldValue) {
                  scope.showModal(newValue, attrs.$$element);
              });

              //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
              $(element).bind("hide.bs.modal", function () {
                  $parse(attrs.modalShow).assign(scope, false);
                  if (!scope.$$phase && !scope.$root.$$phase)
                      scope.$apply();
              });
          }

      };
  });

y en mi vista tengo esto:

<input type="checkbox" ng-model="showDialog"> Show
    <div modal-show="showDialog" class="modal fade">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
     </div><!-- /.modal-content -->
     <div><!-- /.modal-dialog -->
     </div>
3
  • ¿Podrías añadir el código HTML y JavaScript del modal? Igualmente, en AngularJs siempre utilizo este modulo (pathgather.github.io/popeye), ya que con UIBoostrap siempre me ha dado problemas. Commented el 10 may. 2017 a las 6:48
  • @victorlopezsanchez Gracias, creo que no logro mostrar el modal porque ui bootstrap no brinda soporte a bootstrap-4. creo que usare la librelira que me recomendaste, Gracias
    – Osman Cruz
    Commented el 10 may. 2017 a las 19:28
  • @OsmanCruz, si encontraste la solución, puedes publicar y responder a tu propia pregunta. Saludos. Commented el 10 may. 2017 a las 20:39

1 respuesta 1

0

En AngularJs yo siempre utilizo este modulo, ya que con UiBoostrap siempre me ha dado problemas.

Te dejo un ejemplo:

dialogNotification = Popeye.openModal({
    templateUrl: 'template.html',
    containerClass: 'popeye-fadein',
    containerTemplate: '<div class=\"popeye-modal-container container-notification\"><div class=\"popeye-modal body-container\"></div></div>',
    click: false,
    keyboard: false,
    controller: function()
    {
        ...
    },
    ...
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.