Question

我在我的网站上创建了一个模态窗口。

在模态的底部，有一个绿色按钮“Visiter”，开始巡视“Bootstrap Tour”。

我希望在巡视开始时，模态窗口会自动关闭。

我的网站页面，你必须点击“评论çamarche？”

https://www.s1biose.com/page/qui-sommes-nous

我在我的主题中创建了一个JS文件：

(function ($) {

  $('.bs-tour-action-trigger').on('click', function () {
       $('#comment-ca-marche').collapse('hide');
  });

})(window.jQuery);

以下是“Bootstrap Tour”按钮的代码：

<div id="bs-tour-action-trigger-wrapper">
  {% if block_settings %}
    {% if block_settings.type == 'text' %}
      <span class="bs-tour-action-trigger" >{{ block_settings.text }}</span>
    {% elseif block_settings.type == 'button' %}
      <input class="bs-tour-action-trigger" type="button" value="{{ block_settings.text }}" />
    {% endif %}
  {% endif %}
</div>

问题在于，当我离开游览时，屏幕保持灰色并且不允许点击。怎么了？

这是我的模态窗口的html代码：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#comment-ca-marche">
  Comment ça marche ?
</button>

<!-- Modal -->
<div class="modal fade" id="comment-ca-marche" tabindex="-1" role="dialog" aria-labelledby="Comment ça marche ?">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Comment ça marche ?</h4>
      </div>
      <div class="modal-body">

<p>S1BIOSE est un site communautaire regroupant des particuliers et des professionnels autour du thème du bien-être.</p>

<p>Simple et épuré il est très facile à utiliser. S1BIOSE met l'accent sur le respect de la vie privée, vous pouvez à tout moment supprimer votre compte et vos publications.</p>

<p>Sachez que le site est compatible avec tous les appareils ayant une taille d'écran égale ou supérieure à 5 pouces.</p>

<h3>Que pouvez-vous faire sur le site ?</h3>

<p><u><strong>Tout le monde peut :</strong></u></p>

<p>Cliquer sur les boutons "J'aime" présent sur les boutiques, groupes et différents contenus. Celui-ci affiche des paramètres permettant de suivre l'activité d'une page ou tout simplement de l'ajouter à ses favoris.</p>

<p>Lorsqu'une activité se produit sur une page que vous aimez, vous recevez une notification dans votre messagerie instantanée.</p>

<p>&nbsp;</p>

<p>Créer un <strong>profil personnel</strong> <em><a href="/profil/mathieu">(EXEMPLE)</a></em>. Il est activé lors de votre inscription et permet</p>

<ul>
    <li>d'être contacté et prendre contact avec les autres utilisateurs à l'aide de la messagerie instantanée.</li>
    <li>présenter toutes vos publications et centres d'intérêt.</li>
</ul>

<p>Créer plusieurs <strong>groupes personnels </strong><em><a href="/groupe/le-blog-de-mathieu">(EXEMPLE)</a></em> et y publier les contenus suivants</p>

<ul>
    <li>Annonces <a href="/annonce/bureau-smoby"><em>(EXEMPLE)</em></a>, vous ne pouvez pas vendre mais donner des objets en bon état dont vous n'avez plus besoin et ainsi évité de jeter.</li>
    <li>Articles <a href="/article/le-pissenlit-une-mauvaise-herbe-bienfaitrice"><em>(EXEMPLE)</em></a>, pour partager votre passion et vos connaissances.</li>
    <li>Discussions <a href="/discussion/fabriquer-soi-meme-sa-lessive"><em>(EXEMPLE)</em></a>, avec d'autres utilisateurs sur divers sujets.</li>
    <li>Événements <em>(EXEMPLE)</em>, pour sortir en famille et rencontrer les producteurs / artisans locaux sur des marchés par exemple.</li>
    <li>Itinéraires <em>(EXEMPLE)</em>, pour faire découvrir les circuits de randonnée et les lieux à visiter dans votre région.</li>
    <li>Recettes <a href="/recette/mini-brochettes-de-jambon-melon-fromage"><em>(EXEMPLE)</em></a>, pour une cuisine saine.</li>
</ul>

<p>Créer une <strong>boutique personnel</strong><strong>le</strong> <em>(EXEMPLE) </em>si vous êtes non professionnel (pas de vente en ligne pour les particuliers), qui vous permettra de présenter vos</p>

<ul>
    <li>Produits <a href="/produit/savon-artisanal-bio-la-cannelle"><em>(EXEMPLE)</em></a>, si vous vendez un bien (exemple : savon, miel, huile essentielle, ...).</li>
    <li>Services <em><a href="/service/relax-service-detente">(EXEMPLE)</a></em>, si vous vendez une prestation (exemple : massage, stage, sophrologie, ...).</li>
</ul>

<p>&nbsp;</p>

<p><u><strong>Les professionnels peuvent en plus :</strong></u></p>

<p>Créer un <strong>groupe professionnel</strong>&nbsp;<em>(EXEMPLE)</em> (destiné aux associations, comité, entreprise, office du tourisme). Il est identique aux groupes personnels et vous pouvez y publier les mêmes contenus. Il a la particularité d'avoir en plus</p>

<ul>
    <li>Une présentation complète de votre activité (adresse, numéro de téléphone, courriel, horaire, carte, diaporama, description de l'activité, ...).</li>
</ul>

<p>Créer une <strong>boutique professionnelle</strong> <a href="/boutique/argasol-exemple-boutique"><em>(EXEMPLE)</em></a>. Elle est identique aux boutiques personnelles et vous pouvez y publier les mêmes contenus. Elle a la particularité d'avoir en plus</p>

<ul>
    <li>
    <p>Une présentation complète de votre activité (adresse, numéro de téléphone, courriel, horaire, carte, diaporama, description de l'activité, ...).</p>
    </li>
    <li>
    <p>La possibilité d'activer la vente en ligne.</p>
    </li>
</ul>

<h3>Comment est rémunère le site ?</h3>

<p>S1BIOSE est rémunéré grâce aux boutiques professionnelles qui active la vente en ligne. Cette option n'est pas gratuite. Elle est bien sûr facultative.</p>

<p>Si vous êtes intéressé, vous trouverez plus d'informations sur <a href="/guide/le-guide-des-marchands/les-marchands">cette page</a>.</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary bs-tour-action-trigger">Visiter</button>
      </div>
    </div>
  </div>
</div>

Answer 1

阅读Bootstrap modal docs。您可以使用模态隐藏方法，而不是折叠隐藏方法。

$('.bs-tour-action-trigger').on('click', function () {
       $('#comment-ca-marche').modal('hide');
});

如何自动关闭模态窗口？

1 个答案: