Вопрос? Помогите с js кодом в модуле {ajax full-story}

Собственно сам вопрос по модулю {AJAX FULL-STORY}, как мне сделать так, что бы инфа выводилась не в стандартном модальном окне от DLE, а в модальном окне Bootstrap.
Есть код
$(document).on('click', '[data-afs-id]', function () {
var $this = $(this),
$data = $this.data();

$.ajax({
url: dle_root + 'engine/ajax/full-story.php',
type: 'GET',
dataType: 'html',
data: {
newsId: $data.afsId, // Обязательная переменная
preset: ($data.afsPreset) ? $data.afsPreset : '', // Название файла с настройками (необязательно)
template: ($data.afsTemplate) ? $data.afsTemplate : '', // Название файла с шаблоном (необязательно)
},
})
.done(function (data) {
var $html = $(data);

// Данные получены, можно заняться разбором и показать их в диалоге
// Ниже простейший пример вывода контента в стандартном модальном окне DLE

var modalId = 'afs-' + $data.afsId + '-' + $data.afsPreset + '-' + $data.afsTemplate;
modalId = modalId.replace(/\//g, "-");

var $modalBlock = $('<div style="display: none;"><div id="' + modalId + '"></div></div>');

$modalBlock
.appendTo('body') // Добавляем блок на страницу
.find('#' + modalId) // Ищем интересующий нас селектор
.html($html) // Вставляем в него полученный код
.dialog({ // Показываем модальное окно
width: 800
});

})
.fail(function () {
console.log("full-story error");
});
});

этот код выводит блок такого типа

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" data-select-link-text="1"><span class="ui-icon ui-icon-closethick">close</span></a></div>
<div id="afs-548-undefined-undefined" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 130px; height: auto;" scrolltop="0" scrollleft="0">

////////////// тут содержимое которое подгружается с шаблона /////////////

</div>
</div>

У меня есть уже настроеное модальное окно но оно работает на Bootstrap и много JS на нем завязано,
так вот, как мне сделать так, что бы это все дело выводилось таким образом:
<div class="modaler-poster fade-poster" id="pley{news-id}" tabindex="-1" role="dialog" aria-labelledby="pley{news-id}" aria-hidden="true">
<div class="modaler-poster-dialog window-popup event-private-public public-event" role="document">
<div class="modaler-poster-content">
<div class="close icon-close" data-poster="modaler-poster" aria-label="Close">
<svg><use xlink:href="{THEME}/js/test/style/img/svg-icons/icons.svg#olymp-close-icon"></use></svg>
</div>
////////////// тут содержимое которое подгружается с шаблона/////////////
</div>
</div>
</div>
Нужно поправить JS, помогите решить проблему.

 

Пример не работает, точнее вообще ничего не происходит.

 

Можно сделать так, что бы это все выводилось не модальным окном?

 

Ни работает.

 

Все работает, спс за помощь.