gpt4 book ai didi

javascript - 如何在 Greasemonkey 脚本中弹出自定义表单/对话框?

转载 作者:搜寻专家 更新时间:2023-11-01 05:14:00 25 4
gpt4 key购买 nike

我一直在研究一个在 Firefox 中用作插件的脚本,并且发现需要在单击某个按钮时弹出自定义表单。

我需要能够自己创建整个表单,然后解析输入的数据以在原始站点上呈现图像。

我该怎么做?

最佳答案

好的,这是一个完整的脚本示例,展示了如何弹出一个表单并与其控件进行交互。
请注意,它使用 jQuery -- 这使它变得更容易/更短/更简单。

// ==UserScript==
// @name _Form, popup example
// @include http://stackoverflow.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/

//--- Use jQuery to add the form in a "popup" dialog.
$("body").append ( ' \
<div id="gmPopupContainer"> \
<form> <!-- For true form use method="POST" action="YOUR_DESIRED_URL" --> \
<input type="text" id="myNumber1" value=""> \
<input type="text" id="myNumber2" value=""> \
\
<p id="myNumberSum">&nbsp;</p> \
<button id="gmAddNumsBtn" type="button">Add the two numbers</button> \
<button id="gmCloseDlgBtn" type="button">Close popup</button> \
</form> \
</div> \
' );


//--- Use jQuery to activate the dialog buttons.
$("#gmAddNumsBtn").click ( function () {
var A = $("#myNumber1").val ();
var B = $("#myNumber2").val ();
var C = parseInt(A, 10) + parseInt(B, 10);

$("#myNumberSum").text ("The sum is: " + C);
} );

$("#gmCloseDlgBtn").click ( function () {
$("#gmPopupContainer").hide ();
} );


//--- CSS styles make it work...
GM_addStyle ( " \
#gmPopupContainer { \
position: fixed; \
top: 30%; \
left: 20%; \
padding: 2em; \
background: powderblue; \
border: 3px double black; \
border-radius: 1ex; \
z-index: 777; \
} \
#gmPopupContainer button{ \
cursor: pointer; \
margin: 1em 1em 0; \
border: 1px outset buttonface; \
} \
" );



您会注意到该对话框非常简单。对于更复杂的表格,您可以使用 jQuery-UI .

关于javascript - 如何在 Greasemonkey 脚本中弹出自定义表单/对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11668111/

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