Question

在Drupal 8网站上，我创建了Bootstrap导览。

以下是访问代码：

(function ($) {
  'use strict';

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: ".region-navigation-menu-first",
    placement: "bottom",
    title: "Le menu de navigation",
    content: `
Le menu de navigation, permet de naviguer sur le site.
<div class="icon-tour">
  <div class="icon-navbar-first">
    <span class="fa-layers fa-3x">
      <i class="far fa-circle"></i>
        <i class="fas fa-th-list" data-fa-transform="shrink-9"></i>
      </span>
    </span>
  </div>
  <div class="icon-navbar-first-alert">
    <span class="fa-layers fa-3x">
      <i class="fas fa-circle"></i>
        <i class="fas fa-th-list fa-inverse" data-fa-transform="shrink-8"></i>
      </span>
    </span>
  </div>
</div>
L'icône clignote, lorsque vous pouvez administrer la page actuelle.
`,
    template: `
<div class='popover tour'>
  <div class='arrow'></div>
  <h3 class='popover-title'></h3>
  <div class='popover-content'></div>
  <div class='popover-navigation'>
      <button class='btn btn-default btn-sm' data-role='prev'>« Précédent</button>
      <span data-role='separator'>|</span>
      <button class='btn btn-default btn-sm' data-role='next'>Suivant »</button>
  </div>
  <button class='btn btn-default btn-sm' data-role='end'>Quitter</button>
</div>
`,
    backdrop: true,
    backdropPadding: 0
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

            $('#bs-tour-restart').click(function () {
            $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
            tour.init();
            tour.restart();
            });

}(jQuery));

我想创建一个按钮来开始游览。这该怎么做？

https://www.s1biose.com

在页面上，我用以下代码创建了两个Tour按钮：

<button class="btn btn-primary bs-tour-action-trigger" id="bs-tour-restart">Visiter</button>

第一个位于右上角的菜单中，它的工作原理是：

第二个在模式窗口中，它不起作用：

“游览”按钮在模式窗口中不起作用

我的旅行是否正确？这是我的第一个JS可能有错误。

<div class="accroche">
  <b>Enfin un site GRATUIT et SANS PUBLICITÉ, qui n'exploite pas mes données personnelles et ma vie privée</b><br>
  <a href="/user/register" data-drupal-link-system-path="user/register">Inscrivez-vous</a> pour rejoindre la communauté.<br>
  <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#comment-ca-marche">Comment ça marche ?</button>
</div>

<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 (pensant à leur santé, à l'environnement et à la production locale) et des professionnels (artisans/producteurs/restaurateurs dans les domaines des produits BIO, du circuit court et des services de 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><a href="/profile/5"><em>(EXEMPLE)</em></a>. 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><a href="/group/4"><em>(EXEMPLE)</em></a> et y publier les contenus suivants</p>

<ul>
    <li>Annonces <a href="/node/134"><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="/node/26"><em>(EXEMPLE)</em></a>, pour partager votre passion et vos connaissances.</li>
    <li>Discussions <a href="/node/63"><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="/node/69"><em>(EXEMPLE)</em></a>, pour une cuisine saine.</li>
</ul>

<p>Créer une <strong>boutique personnelle </strong><a href="/store/7"><em>(EXEMPLE)</em></a> 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="/product/12"><em>(EXEMPLE)</em></a>, si vous vendez un bien (exemple : savon, miel, huile essentielle, ...).</li>
    <li>Services <a href="/product/17"><em>(EXEMPLE)</em></a>, 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> <a href="/group/8"><em>(EXEMPLE)</em></a> (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="/store/3"><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éré 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="/node/139">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" id="bs-tour-restart">Visiter</button>
      </div>
    </div>
  </div>
</div>

为什么按钮不能与Modal一起使用？

0 个答案: