Apply bootstrap theme on jQuery dialog plugin?

Question

I'm using bootstrap as UI library for my website.

 <link href="bootstrap.min.css" rel="stylesheet">

In the website I used jQuery dialog plugin. Is it possible to apply bootstrap style on the dialog? I do not want use jquery-ui css. How I can style my dialog using bootstrap?

Answer 1

I created a basic example for you here: https://jsfiddle.net/o877hLg5/

$(function() {
  $("#dialog").dialog();
  var $dialog = $(".ui-dialog");
  $dialog.addClass("modal-content");
  $dialog.find(".ui-dialog-titlebar").addClass("modal-header").find(".ui-button").addClass("close").text("x");
  $dialog.find(".ui-dialog-content").addClass("modal-body");
});

You will need to import the bootstrap modal css to make it work: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal.css