jQuery всплывающее окно диалога не имеет «х» в поле закрытия в правом верхнем углу всплывающего окна

Question

У меня есть всплывающее окно jQuery, и "x" не отображается в поле закрытия в правом верхнем углу всплывающего окна.

I Я использую этот пример: https://jqueryui.com/dialog/

Я включил ссылку и скрипт (по два).

My html is:

  <div class="form-popup form-container autoScroll" id="myForm">
        <table class="table table-hover table-bordered" id="riskTable">
            <thead>
                <tr>
                  <th>rkId</th>
                  <th>Risk Name</th>
                  <th></th>
                </tr>
            </thead>
            <tbody id="riskTablebody">
            </tbody>
        </table>
    </div>

Мой jQuery - это:

$(function() {
    $('#updateRisk').click(function() {
        $("#myForm").dialog({
            title: "Select Risks",
            width: 600, 
            modal: true, 
            resizable: true,
        });   
    });    
});

Я хочу, чтобы это было как можно более удобным для пользователя, поэтому выделение красным цветом X будет дополнительным бонусом!

Мой список библиотеки cdn:

<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/dataRender/datetime.js"></script>

<!-- Confirm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<!-- Google Maps - not implemented due to cost -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>  -->

<!-- Le styles -->
<!-- jQuery -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

<!-- Confirm -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">

Answer 1

ОК, jquery -ui.min. js не работает с 1.10. Так что либо:

• Установите более раннюю версию; или
• Поместите библиотеку после библиотеки bootstrap (отрицательно повлияет на подсказку bootstrap); или

• Разрешите конфликт с помощью кода ниже:

  $('#updateRisk').click(function() {
      if (typeof $.fn.bootstrapBtn =='undefined') {
          $.fn.bootstrapBtn = $.fn.button.noConflict();
      };
  
      $("#myForm").dialog({
          title: "Select Risks",
          width: 600, 
          modal: true, 
          resizable: true,
      });
      showRiskTable();
  });
  

Answer 2

Просто добавьте необходимые библиотеки, и это должно работать. Ниже приведен рабочий пример. Также я добавил немного css, чтобы скрыть содержимое перед открытием модели.

#dialog{
  display:none;
}

Рабочий пример:

https://jsfiddle.net/mrAhmedkhan/04goxq8h/11/