![](/img/trans.png)
[英]How can I pop up a element from a website into a windows with Greasemonkey?
[英]How do I pop up a custom form/dialog in a Greasemonkey script?
我一直在研究一个在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"> </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 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.