web-dev-qa-db-fra.com

Magnific Popup: Comment ajouter un bouton de fermeture personnalisé dans un formulaire popup?

J'ai un formulaire qui s'ouvre sur une fenêtre contextuelle et j'ai ajouté un close button personnalisé à côté d'un bouton d'envoi.

Ceci est un jQuery que j'utilise pour le bouton de fermeture:

$(document).ready(function() {
    $('#close').click(function() {
        $.magnificPopup.close();
    });
});

Cependant, cela ne semble pas fonctionner. Est-ce que quelqu'un sait comment faire ça?

jquerymagnific-popup
6
user1448031

Si votre extrait se trouve dans votre dossier principal, le bouton contextuel ajax peut ne pas être lié à l'événement. J'imagine deux solutions:

Utilisez "on" au lieu de "clic": (non testé)

$('#close').on( "click", function() {
  $.magnificPopup.close();
});

Ou le faire de cette façon: (testé)

ajoute cette fonction dans votre js principal 

function closePopup() {
  $.magnificPopup.close();
}

Et utilisez ce genre de bouton dans votre popup html 

<button type="button" onClick="closePopup();">Close</button>

Iframe:

Si votre bouton est situé dans une iframe et que le script magnificpopup de la fenêtre principale, du même domaine , vous pouvez accéder à la fonction ci-dessus de la manière suivante:

<button type="button" onClick="parent.closePopup();">Close</button>
8
seba

essaye ça 

<pre class="default prettyprint prettyprinted">
<code>

    $('#close').click(function(){
        $('.mfp-close').trigger('click');
      });

</code>
</pre>
4
PaulusCh

Certaines de ces réponses fonctionnent, mais cela dépend de votre implémentation de la popup. Si vous rencontrez toujours des problèmes, nous vous suggérons d'utiliser la méthode de rappel pour assurer la cohérence:

$.magnificPopup.open({
  items: {
    src: $domElement,
    type: 'inline'
  }, 
  callbacks: {
    open: function() { 
        $('#close-btn').on('click',function(event){
          event.preventDefault();
          $.magnificPopup.close();
        }); 
    }
  }
});

J'espère que cela t'aides!

1
ChongFury

Cela ressemble à un bug dans Magnific Pop up. Pour utiliser le bouton dans le conteneur, vous devez fournir fixedContentPos: true;

le code suivant semble bien fonctionner pour moi. J'espère que ça aide.

    $('.ajax-popup-link').magnificPopup({
        type: 'ajax',
        removalDelay: 100, // Delay in milliseconds before popup is removed
        mainClass: 'my-mfp-slide-bottom',`enter code here` // Class that is added to popup wrapper and background
        closeOnContentClick: false, 
        closeOnBgClick: false,
        showCloseBtn: true,
        closeBtnInside: true,
        fixedContentPos: true,
        alignTop: true,
//        settings: {cache:false, async:false},
        callbacks: {
            open: function () {   
            },
            beforeClose: function () {
                this.content.addClass('light-speed-out');
            },
            close: function () {
                this.content.removeClass('light-speed-out');
            }
        },
        midClick: true

    });
1
Ghufran Yousafi

Vous devez ajouter à l'intérieur des paramètres contextuels closeBtnInside:true.

1
albert_rar

1. Solution  

Les méthodes ci-dessous n'ont pas en abrégé "ouvert" et "fermé".

Ils doivent être appelés via l'objet "instance". "Instance" n'est disponible que si au moins un popup a été ouvert. Par exemple: $ .magnificPopup.instance.doSomething ();

voici un exemple de clôture personnalisée pour magnificPopup

// sauvegarde l'instance magnificPopup dans la variable

var magnificPopup = $.magnificPopup.instance;

// ouvre une instance magnifique

$.magnificPopup.open({
  items: {
    src: 'someimage.jpg'
  },
  type: 'image'
}, 0);

// Fermer le popup actuellement ouvert

magnificPopup.close();

// Navigation lorsque la galerie est activée

magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4

// met à jour le contenu de la popup. Utile après avoir changé les "éléments"

magnificPopup.updateItemHTML();

2. Solution  

vous pouvez ajouter un bouton dans la fenêtre contextuelle et attribuer une fonction à l'événement click comme:

$('#close-button-verify').click(function(){
    //This will close the most recently popped dialog
    //This method specially works for auto popped dialogs i.e.
    //Popup you opened using $.magnificPopup.open()

    $.magnificPopup.close();
 });

Si une fenêtre contextuelle est déclenchée via un événement onClick, le même objet jQuery peut être utilisé pour la fermer.

$('#close-button-verify').click(function(){
    $('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
 });

bonne chance :)

0
Aysad K.

Le moyen le plus simple est d’ajouter une classe "mfp-close" à votre contrôle, comme ceci:

 <a href="#" title="Close" type="button" class="btn btn-default mfp-close"> Fermer </a>

Ici, les classes Bootstrap sont également utilisées pour faire en sorte que le lien ressemble à bouton - peu importe.

0
Demiurg

$ .magnificPopup.close (); .. fonctionnerait si vous le mettiez dans votre contenu chargé avec ajax

0
Eugen G.