Как конвертировать пользовательский диалог JQuery в модальный Boostrap?

Question

Как происходит преобразование этого элемента в boostrap ui jquery?

<div id="dialogDeleteDefaultVariant" title="default">
  <p><span  style="margin: 0 7px 20px 0;"></span>' . HTML::button('dialog_delete_default_variant_desc', null, 'index.php?A&Catalog\Products&Edit&cPath=40&pID=20#section_ProductsAttributesNewApp_content', null, null, 'sm') . '</p>
</div>

UI JQuery элемент

$('#dialogDeleteDefaultVariant').dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    buttons: {
        '{$button_ok}': function() {
            $(this).dialog('close');
        }
    }
})

Answer 1

Открыть модал

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>enter code here
    </div>

  </div>
</div>