JQuery UI 按钮样式未出现在对话框中

Question

对话框内的按钮未以 JQuery UI 样式显示，而外部按钮正在风格化。这是我的一段代码，我认为我做错了-

$("#addSection").button().click(function(){
    $('#sectionDialog').dialog({
        buttons:{
            "Add New Section":function(){},
            "Cancel": function(){}}
    }); 
 });

内部对话框- Here is the problem

外部对话框- Appering perfectly outside dialog box

编辑：
我的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Daily Tasks</title>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquery/external/jquery/jquery.js"></script>
    <script src="jquery/jquery-ui.min.js"></script>

    <!-- CSS Stylesheets -->
    <link rel="stylesheet" href="jquery/jquery-ui.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />

  </head>
  <body>
    <div class="container-fluid">
      <h2>Daily Tasks</h2>
      <hr width="100%" size="4">
      <div class="addSection">
        <button id="addSection">Add Section</button>
      </div>
      <div id="sections">
        <ul id="main">
          <li><a href="#personal">Personal</a><span class='ui-icon ui-icon-close'></span></li>
          <li><a href="#work">Work</a><span class='ui-icon ui-icon-close'></span></li>
        </ul>
        <ol id="personal">

        </ol>
        <ol id="work">

        </ol>
      </div>
      <div class="addTask">
        <button id="addTask">Add Task</button>
      </div>
      <div id="sectionDialog" title="Add a section">
        <label for="section">Section Name:</label><input id="section" type="text">
      </div>
      <div id="taskDialog" title="Add a task">
        <label for="task">Task Name:</label><input id="task" type="text">
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

我的CSS代码：

body{
    background-color: #19456b;
}

h2{
    text-align: center;
    color: #d89216;
    font-family:'Times New Roman', Times, serif;
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 500;
    margin: 10px 0;
}

hr{
    margin: 0;
    color: #d89216;
}

button:focus{outline:none !important;}

.container-fluid{
    margin-top: 50px;
    padding: 2px 15px;
    width: 800px;
    height: 600px;
    border: 5px inset rgb(255,214,75);
    background-color: blanchedalmond;
}

ol li{
    padding: 2px;
    cursor: grabbing;
}

ol li:hover{
    background-color: #fad586;
    border: 0.5px solid rgb(238, 148, 14);
}

.checkbox
{
    margin: 0 5px 0 3px;
    cursor: pointer;
}

.addSection
{
    text-align: right;
    margin: 12px 2px;
}

.addTask
{
    text-align: right;
    margin: 12px 2px;
}

#sectionDialog{
    display: none;
}

#taskDialog{
    display: none;
}

.ui-icon-close
{
    margin-top: 0.5px;
    margin-right: 3px;
    transform: scale(1.5);
    cursor: pointer;
}

提前致谢！

Answer 1

考虑像这样调整您的 head：

<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />

它们加载的顺序很重要。

$(function() {
  $("#addSection").button().click(function() {
    $('#sectionDialog').dialog({
      buttons: {
        "Add New Section": function() {},
        "Cancel": function() {}
      }
    });
  });
});

body {
  background-color: #19456b;
}

h2 {
  text-align: center;
  color: #d89216;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 500;
  margin: 10px 0;
}

hr {
  margin: 0;
  color: #d89216;
}

button:focus {
  outline: none !important;
}

.container-fluid {
  margin-top: 50px;
  padding: 2px 15px;
  width: 800px;
  height: 600px;
  border: 5px inset rgb(255, 214, 75);
  background-color: blanchedalmond;
}

ol li {
  padding: 2px;
  cursor: grabbing;
}

ol li:hover {
  background-color: #fad586;
  border: 0.5px solid rgb(238, 148, 14);
}

.checkbox {
  margin: 0 5px 0 3px;
  cursor: pointer;
}

.addSection {
  text-align: right;
  margin: 12px 2px;
}

.addTask {
  text-align: right;
  margin: 12px 2px;
}

#sectionDialog {
  display: none;
}

#taskDialog {
  display: none;
}

.ui-icon-close {
  margin-top: 0.5px;
  margin-right: 3px;
  transform: scale(1.5);
  cursor: pointer;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container-fluid">
  <h2>Daily Tasks</h2>
  <hr width="100%" size="4">
  <div class="addSection">
    <button id="addSection">Add Section</button>
  </div>
  <div id="sections">
    <ul id="main">
      <li><a href="#personal">Personal</a><span class='ui-icon ui-icon-close'></span></li>
      <li><a href="#work">Work</a><span class='ui-icon ui-icon-close'></span></li>
    </ul>
    <ol id="personal">

    </ol>
    <ol id="work">

    </ol>
  </div>
  <div class="addTask">
    <button id="addTask">Add Task</button>
  </div>
  <div id="sectionDialog" title="Add a section">
    <label for="section">Section Name:</label><input id="section" type="text">
  </div>
  <div id="taskDialog" title="Add a task">
    <label for="task">Task Name:</label><input id="task" type="text">
  </div>
</div>

JQuery UI 按钮样式未出现在对话框中

JQuery UI button style not appearing in Dialog box

javascript

jquery

jquery-ui