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

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ả

Happy coding.