Jquery UI 内部对话框 html 未显示

Question

我想在对话框中插入登录表单。现在显示对话框但没有表格！有什么帮助吗？我查看了 google 和本网站上的其他帖子，但没有找到答案！

代码如下：

$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({
  autoOpen: false,
  modal: true,
  draggable: false,
  resizable: false,
  width: 600,
  height: 400
});

$('#cl').click(function() {

  $('.dia').dialog("open");

});

<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>

<body>
  <input type="submit" id="cl">
  <div class="dia">
    <form class="dia login-form-dia" method="post">
      <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16">
      <input type="text" id="si" name="lpassword" placeholder="Password">
      <input type="submit" name="login" value="LOGIN">
    </form>
  </div>
</body>


</html>

Answer 1

这是因为您在调用 .text() 方法时替换了 .dia 元素的内容：

$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ ... });

您似乎更愿意使用以下内容来添加该文本：

$('.dia').attr('title', 'LOGIN').prepend('<h2>Login to eWarsha</h2>').dialog({ ... });

..您可以只在 HTML 中指定 title 属性，然后在其中添加所需的文本，而不是将其放在前面：

var $dialog = $('.dia').dialog({
  autoOpen: false,
  modal: true,
  draggable: false,
  resizable: false,
  width: 600,
  height: 400
});

$('#cl').click(function() {
  $dialog.dialog("open");
});

<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>

<body>
  <input type="submit" id="cl">
  <div class="dia" title="LOGIN">
    <h2>Login to eWarsha</h2>
    <form class="login-form-dia" method="post">
      <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16">
      <input type="text" id="si" name="lpassword" placeholder="Password">
      <input type="submit" name="login" value="LOGIN">
    </form>
  </div>
</body>

</html>

Jquery UI 内部对话框 html 未显示

Jquery UI dialog inner html not showing

jquery

html

forms

jquery-ui