这是我网站的登录和注册门户的脚本，当有人将鼠标悬停在标题中的登录链接上时会显示它，我如何将其作为弹出窗口打开。
<script type="text/javascript">
$(document).ready(function() {
$(".welcome").mouseover(function() {
$("#sign_box").fadeIn("slow");
$("#sign_box").show();
});
$("#sign_box").live("mouseleave", function() {
$("#sign_box").hide();
});
});
</script> -->
<style type="text/css">
#sign_box {
width: 400px;
background-color: #fff;
border: solid 1px #5ea0c1;
padding: 8px;
position: absolute;
display: none;
text-align: left;
z-index: 1100;
}
</style>
经过一番搜索，我发现了一个 JavaScript 代码，可以将注册和登录窗口显示为弹出窗口，但我无法理解如何将其应用到我名为sign_box的 div id
function displayPopup(params) {
var pageid = 1;
var pageObj = Runner.pages.PageManager.getById(pageid);
args = {
bodyContent: "<iframe frameborder='0' id='popupIframe" + pageid + "' style='width: 100%; height: 100%; border: 0;'></iframe>",
footerContent: "<span> </span>",
headerContent: params.headerContent,
centered: true,
render: true,
width: params.width ? params.width : 450,
height: params.height ? params.height : 315
},
afterCreateHandler = function (win) {
var bodyNode = $(win.bodyNode.getDOMNode()),
iframeNode = $("iframe#popupIframe" + pageid, bodyNode);
iframeNode.load(function () {
if (Runner.isChrome) {
bodyNode.addClass("noScrollBar");
}
win.show();
}).attr("src", params.url);
},
afterCloseHandler = params.afterClose;
if (Runner.isChrome) {
$("< style type='text/css'> .yui3-widget-bd::-webkit-scrollbar {display:none;} < /style>").appendTo("head");
}
Runner.pages.PageManager.createFlyWin.call(pageObj, args, true,
afterCreateHandler, afterCloseHandler);
}
function login() {
params = {
url: 'login.php',
afterClose: function (win) {
win.destroy(true);
},
headerContent: 'Login'
};
displayPopup(params);
}
最佳答案
我说坚持使用标准 jQuery 对话框:https://jqueryui.com/dialog/#default
它们非常容易实现和修改，并且外观漂亮；另外，它们可以拖动并在屏幕中自动居中。试试这个:
<title>jQuery UI Dialog - Default functionality</title>
<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="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Sign-in">
<input type="text" name="login" id="login" placeholder="Enter Username" />
<br>
<br>
<input type="password" name="password" id="password" placeholder="Password" />
</div>关于javascript - 将我的登录和签名页面显示为弹出窗口的 JavaScript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30341702/