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/

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

2 个答案: