为网页创建JQuery单字段确认对话框的简单方法

Question

这就是我要做的：

• 用户单击图像按钮
• 它显示带有标签和文本字段以及“确定”按钮的确认对话框
• 如果他们输入一个值，然后单击“确定”按钮，则返回该值，然后该值可用于根据输入的值调用构造的超链接。
• 如果他们单击取消休假值空白，则弹出窗口将被关闭

但是页面是动态生成的，可能有很多行具有一个图像按钮，该按钮将打开所述弹出窗口，我不想为每个所需的弹出窗口添加JavaScript函数。

我已经有点使用JQuery了，所以我认为使用JQuery Dialog是可行的方法，但实际上实现这个看似简单的任务并没有帮助。

我正在寻找一个简单的示例，而没有我实际上不需要的任何无关紧要的东西。

详细更新

这是我目前在呼叫htmnl中所拥有的

元素内有两个按钮，第一个是输入按钮，可以使用，第二个当前仅调用超链接，但它需要discogsid参数的值（当前为xxxxx）。 因此，我想单击第二个为用户提供一种输入值的方法，然后如果他们输入内容，则使用该值作为url中discogsid的值

 <td>
    <input title="View tracks in this release" onclick="return toggleMe(this,'232')" 
src="/images/open.png" alt="Open" type="image">&nbsp;
    <a href="/linkrelease/?discogsid=xxxxxx&amp;mbid=e3c0e7c7-df7c-4b51-9894-e45d1480e7b5" target="_blank">
<img src="/images/link.png"</a>
    </td>

Answer 1

保持简单:)试试这个http://jsfiddle.net/7r1z8v7u/

$("div").click(function() {

    var answer = prompt("Pls provide your input");
    if(answer != null) myHyperlinkBuilder(answer);
}

在这里，我使用“ div”作为选择器。 这样一来，我们就可以处理所有图像的点击行为。

然后，显示对话框是简单的JavaScript。 只有在用户输入了某些输入后，如果条件允许，我们才继续构建自定义URL。

希望这可以帮助！

Answer 2

使用jQuery，您将需要在您的链接上附加一个点击事件。 您可以以您认为适合您的应用程序的任何方式执行此操作。 在示例中，我将使用一个类。

<a href="http://..." class="requireQueryEntry" target="_blank">Test</a>

$('.requireQueryEntry').click(GetSearchQuery);

您的点击处理程序将需要阻止默认操作，因为您正在使用链接。 这意味着您必须在代码中重新发布导航。

function GetSearchQuery() {
    var thelink = $(this);
    $("#dialogSearch").dialog({
        resizable: false,
        modal: true,
        title: "Search",
        height: 180,
        width: 340,
        buttons: {
            "Search": function () {
                $(this).dialog('close');
                callback(thelink);
            },
                "Cancel": function () {
                $(this).dialog('close');
            }
        }
    });
    //This line prevents the default action and the propagation of the event. It only works this way because jQuery handles it that way for us.
    return false;
}


function callback(theLink) {
    var href = theLink.attr("href");
    var target = theLink.attr('target');
    var newQuery = $("#googleQuery").val();
    if (newQuery.length > 0) {
        href = href.replace("xxxxxx", newQuery);
    } else {
        return; // end the function here when the user enters nothing
    }
    //This may cause popup blockers
    var win = window.open(href, target);
    $("#googleQuery").val("");
}

我整理了一个例子： http : //jsfiddle.net/anh7g8eb/2/

Answer 3

我对这两种解决方案的困难实际上是要从html调用对话框。 两种使用的解决方案都不符合我的情况。

我得出结论，在解决方案中，超链接实际上并不是一个超链接，如果像我为第一个选项所做的那样将其更改为按钮时，它会变得更容易，所以hmtl更改为

<td>
<input title="View tracks in this release" onclick="return toggleMe(this,'30')" src="/images/open.png" alt="Open" type="image">
&nbsp;
<input title="Link" onclick="return promptForDiscogsReleaseId(this,'676fdad7-69b5-4f38-a547-a8320f01ad59')" src="/images/custom_link.png" alt="Link" type="image">
</td>

and added this javascript function that shows a prompt and then creates a new page with the derived hyperlink

javascript功能

function promptForDiscogsReleaseId(btn,mbReleaseId) {

    var answer = prompt("Please the Discogs Release Id you want to link this release to:");
    window.open("/linkrelease/?discogsid="+answer+"&mbid="+mbReleaseId, "_blank");
}

而且有效。