介绍之旅(带警报框指向元素)

时间:2018-02-10 16:29:36

标签: javascript jquery html5 css3 bootstrap-4

如何使用html,css,bootstrap和javascript向我的网站添加简介之旅(带有警告框指向元素的 )?

我正在开展一个项目,我需要在用户注册后添加欢迎消息(仅出现一次)的介绍之旅。

我尝试使用bootstrap tour,但它无效



var tour = new Tour({
  steps: [{
      element: "#head",
      title: "Title of my step1",
      content: "Content of my step1"
    },
    {
      element: "#welcome",
      title: "Title of my step",
      content: "Content of my step"
    } {
      element: "#hew",
      title: "Title of my step",
      content: "Content of my step"
    },

  ]
});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" rel="stylesheet" />

<div id="wrapper">

  <div id="topbar">

    <header id="head">



      <ul>
        <li><a href="signup.html">job offer</a></li>
        <li><a href="login.html">Logout</a>
        </li>
      </ul>

    </header>


    <section id="reg_form_container">


      <br>
      <br>

      <div id="welcome">
        <pre><B><I>welcome to chitter,</I></B>
                   <I>    Thank You For Signing up with us.Chitter team want to welcome
                        you in our family.we feel proud to introduce you to a new
                         plateform where you can find multifunctioning site</I></PRE>
        <form id="tour"> <span><BUTTON  onclick="myFunction()">Take a SITE TOUR</BUTTON></span></form>
      </div>
      <div id="hew">
        <pre><B><I>welcome to my web site,</I></B>
                   <I>    Thank You For Signing up with us.Chitter team want to welcome
                        you in our family.we feel proud to introduce you to a new
                         plateform where you can find multifunctioning site</I></PRE>
        <form id="tour"> <span><BUTTON  onclick="myFunction()">Take a SITE TOUR</BUTTON></span></form>
      </div>


    </section>


    <footer></footer>


  </div>
&#13;
&#13;
&#13;

0 个答案:

没有答案