jquery - 私のウェブサイトでの初めてのツアーにブートストラップのスティッキー\永続的なポップオーバーを使用する

Question

私のウェブサイトには、新しいユーザーに紹介したい機能がいくつかあります。そのため、新しい機能に慣れていない新しいユーザーがログインするたびに、私は彼を index.php?welcome=1 にリダイレクトします。

このページでは、彼がこのページの特定の要素を参照できるようにして、各要素の横に説明を表示し、次の要素に進むことができるように「次へ」ボタンを提供したいと思います。

今、私は2つの問題を抱えているようです:

1. ユーザーが誤ってポップオーバーを閉じすぎないようにしたいので、バインドされている要素をクリックしてポップオーバーを切り替える機能を無効にしたいと考えています。

2. また、システムが非常に複雑であるため、ユーザーが誤ってまたは意図的に最初の説明をスキップしたくありません。

この些細な問題のために、私はtwitterプロジェクトファイルをカスタマイズしようとしています。

私のコード: (test.json)

    {
   "0":{
      "id":"intro",
      "title":"Welcome",
      "body":"Hello, and <b>welcome</b> to atavde"
   },
   "1":{
      "id":"autoShare",
      "title":"AutoShare position",
      "body":"Here you can autoShare a position Break line"
   },
   "2":{
      "id":"personalShare",
      "title":"PerrsonalShare section",
      "body":"personalBodypersonalBody"
   },
   "3":{
      "id":"anotherExample",
      "title":"thisispersonal share exmp",
      "body":"personalBodypersonalBody"
   },
   "4":{
      "id":"specificExample",
      "title":"This is a specific example",
      "body":"specific example horrey"
   }  
}

(popoverNavigate.js)

var currentPopOver = 0;
popOvers = {};
$(function ()  
{
    var i = 0
    $.getJSON("test.json", function(json) {
            console.log(json);
            // json.each(function(){
            //  console.log($(this));
            // });
            for(var j in json){
                json[j]['body'] = json[j]['body'] + "<div style='display:block;'><span class='btn btn-link next'>Next</span><span class='btn btn-link close'>Close</span></div>";
            }
            popovers = json;
            $('[rel="popover"]').each(function(){
                var currentId = $(this).attr('id');
                // var currentConetnet = currentId.substr(currentId.length  - 1);
                console.log(currentId);
                $(this).popover({
                    html : true,
                    placement : 'bottom',               
                    title: popovers[i]['title'],
                    content: popovers[i]['body'] /*function(){return $('#content' + currentConetnet).html()}*/
                })
                // .on('click', function(){
                //  $(this).popover('hide').delay(300).queue(function(next){
                //  $(this).popover('show');        
                //  });
                // });
                i++;

            });
            $('#' + popovers[currentPopOver]['id']).popover('show');
});
// $.ajax(data: "JSON", type: "POST", url : "../test.json",success: function(json) {
//    alert("JSON Data: " + json);
//  });

// htmlElements = ;


// $('body').on('click', '.popover .close', function(){
//  $('#example' + currentPopOver).popover('hide');
// })
// $('[rel="popover"]').click(function(e){
//   e.preventDefault();
//   if (! $(this).next('div.popover:visible').length){

//      // $('#' + popovers[currentPopOver]['id']).popover('show');
//      openedPopoverId = $(this).attr('id');
//      for(i in popovers){
//          if(openedPopoverId == popovers[i]['id']){
//              var previousPopover = currentPopOver;
//              currentPopOver = i;
//              $('#' + popovers[previousPopover]['id']).popover('hide').delay(500).queue(function(next){
//                  $('#' + popovers[currentPopOver]['id']).popover('show');
//                  next();
//              });
//          }

//      }
//  }   
//  return false;

// });
$('body').on('click', '.popover .close', function(){
    $('#' + popovers[currentPopOver]['id']).popover('hide');
})

$('body').on('click', '.popover .next', function () {
   if(currentPopOver < $('[rel="popover"]').length - 1)
    nextPopOver(1);
    else if(currentPopOver == $('[rel="popover"]').length - 1 ){
        $('#' + popovers[currentPopOver]['id']).popover('hide');
    }
});

// $('.next').live('click', function(){
// if(currentPopOver < $('a').length)
//  nextPopOver(1);
// })

$('body').on('click', '.popover .previous', function(){
if(currentPopOver > 1)  
    nextPopOver(-1);
})




});  

function nextPopOver(direction){//1 - next, -1 previous
    $('#' + popovers[currentPopOver]['id']).popover('hide').delay(500).queue(function(next){
    currentPopOver += direction;
    $('#' + popovers[currentPopOver]['id']).popover('show');
    $('#' + popovers[currentPopOver]['id']).focus();
    next(); 
    });
}