Question

我使用以下代码创建了一个弹出窗口。我想在屏幕右侧（底部和角落）创建一个带有框的弹出窗口。我不能这样做。你能帮我做一下吗？如果没有联系，我希望人们通过单击X图标关闭窗口。非常感谢您的帮助

<html lang="en">
<head>
  <meta charset="utf-8">
  <script>
 $(function() {
  $(".dil").click(function () {
    $( "#dialog" ).dialog({
      position: { my: "right bottom", at: "right bottom", of: window }
    });
    return false;
  });
});
  </script>
.pop {display: none;}
  </head>
<body>
link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">

<button class="btn dil">Open</button>

<div class="messagepop pop" id="dialog">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>
</body>
</html>

Answer 1

如果您已正确阅读文档，则需要进行一些简单的基本更改：

您应该将.messagepop的相应ID设为#dialog。
您应该将.dialog()附加到点击事件而非加载事件。

$(function() {
  $(".dil").click(function () {
    $( "#dialog" ).dialog({
      position: { my: "right bottom", at: "right bottom", of: window }
    });
    return false;
  });
});

.pop {display: none;}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">

<button class="btn dil">Open</button>

<div class="messagepop pop" id="dialog">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

创建简单的弹出窗口

1 个答案: