jquery用户界面警报对话框与表单元素一起使用时将消失

jquery ui对话框与表单元素一起使用时,它会立即消失。当我删除整个表单标记内容时,我看到只有当用户单击关闭按钮时才会关闭它。问题是在对话框中创建DIV,哪个表单元素使其消失? 尝试使用CSS自定义样式和jquery .attr() 和 .html() 通过覆盖本机警报来实现这一点。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="httpsz:/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

function displayalert()
{
    $("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>
 
 <form>
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>

我已经包含了要在按钮单击时显示的警报。如前所述,当它单独使用时,我看到它只有在用户单击关闭时才会关闭。但当与形式一起使用时,它会立即消失。

只有当用户点击关闭按钮时,我才需要关闭警报。因为表单很大,所以不包括表单内容。它有一组单选按钮和复选框以及提交按钮。