Trong quá trình làm việc với Jquery dialog có lần mình đã gặp trường hợp khi hiển thị dialog box thì thiếu mất icon close
jquery-dialog-box-error

Sau khi debug thì mình thấy code của mình sau khi generated bởi jquery khác với demo trên trang chủ

Code của mình

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><spanid="ui-id-2" class="ui-dialog-title">Title
<button class="ui-dialog-titlebar-close"></button></div>

Code trên trang chủ jquery

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" title="close">

<span class="ui-button-text">close</span>
</button></div>

Lỗi này là do bạn đã sử dụng thư viện jquery-ui trước thư viện boostrap
Nguyên văn “The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in”

Biết được nguyên nhân rồi thì xử lý thật dễ dàng đúng không?

Bạn có thể khắc phục lỗi này (và đỡ tốn thời gian stackoverflow giống mình) bằng cách:

Từ đoạn code

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

Bạn chuyển thành

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Kết quả
jquery-dialog-box-ok

Happy coding.