Как создать всплывающее окно Bootstrap из Javascript?

Question

Я создаю страницу с серией аналоговых часов, которые могут содержать собрания (если есть встреча, этот период времени подсвечивается синим цветом на часах), где каждый аналоговый тактовый сигнал представляет собой другой день.

Я пытаюсь сделать так, что если вы нажмете на часть аналоговых часов, где собрание уже запланировано (т. Е. Этот раздел синего цвета), Bootstrap Popover отображает информацию о собрании. Я обрабатываю щелчок в файле piechart.js, но в настоящее время я знаю только, как создавать popovers с кнопками, встроенными в html.

Если я хочу, чтобы справиться с этой щелчком в piechart.js, и создать поповер расположенный в этих конкретных часах, содержащего конкретной информация собрания (которое хранится в файл с именем meeting.js, я понимаю, как чтобы получить информацию о встрече оттуда), как это сделать с помощью javascript? Я новичок в этих языках, так что медведь со мной! Спасибо!

Answer 1

Поскольку синий цвет, скорее всего, контролируется изменением класса таблицы стилей, просто найдите элемент с этим классом и примените popover. Я сделал это с наведением мыши событием на datatables.net сетке (во время метода createdRow, я добавил «» SomeClass к рядам, чтобы отличить их от других с.в. на странице.)

function setPopover() { 

    $('.someclass').on('mouseenter', function (e) { 
     $('.someclass').not(this).popover('destroy'); 
     var InstId = $(this).find("td:first-child").html(); 
     var InstName = $(this).find("td:first-child").next("td").html(); 
     if (!$(this).data("bs.popover")) { 

      $(this).popover({ 
       placement: 'right', 
       trigger: 'manual', 
       html: true, 
       title: InstName, 
       content: function() { 
        return $.ajax({ 
         url: '@Url.Action("ControllerMethod", "Controller")', 
         data: { id: InstId }, 
         dataType: 'html'        
        }).responseText; 
       } 
      }); 

     } 

     $(this).popover('show'); 
    }); 
} 

Answer 2

Чтобы создать новый поповер с JavaScript , вы можете использовать функцию popover().

Чтобы определить, в какие дни уже запланировано собрание, мы можем добавить пользовательское свойство data-booked.

Селектор $('[data-booked="true"]') является селектором атрибутов и отображает только popover для этой конкретной кнопки.

Если вы нажмете на кнопку в течение дня, который забронирован (сегодня), вы увидите попсор, но если вы нажмете на другую кнопку, ничего не появится, потому что этот день не был забронирован.

var times = ["8:00", "9:00", "10:00", "11:00", "12:00", "1:00"]; 
 

 
function randomTime() { 
 
    return times[Math.floor(Math.random() * times.length)]; 
 
} 
 

 
$('[data-booked="true"]').popover({ 
 
    html: true, 
 
    title: "<span class='booked'>This is booked</span>", 
 
    content: "Meeting at " + randomTime() 
 
});

.button-group { 
 
    margin: 50px; 
 
} 
 

 
.booked { 
 
    background: blue; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="button-group"> 
 
    <button data-booked="true" class="btn btn-success" id="today">Today</button> 
 
    <button data-booked="false" class="btn btn-warning" id="tomorrow">Tomorrow</button> 
 
</div>