gpt4 book ai didi

javascript - 将我的登录和签名页面显示为弹出窗口的 JavaScript 代码

转载 作者:行者123 更新时间:2023-11-28 00:17:20 25 4
gpt4 key购买 nike

这是我网站的登录和注册门户的脚本,当有人将鼠标悬停在标题中的登录链接上时会显示它,我如何将其作为弹出窗口打开。

<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>&nbsp;</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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com