Question

所以我想做的就是点击一个图像，这会在文本字段中打开一个带有图像URL的弹出窗口。应该可以更改URL以及更改图像URL。

我对javascript很差，这就是为什么我要求帮助。

HTML

<img src="#" onClick="changePicture();" />

的Javascript

function changePicture() {
      var myPopup = window.open("", "", "width=200, height=100");
}

Answer 1

实际上这很简单。制作一个这样的图像：

<img src="http://lorempizza.com/200/200/" onclick="change()" id="target">

功能很简单。

    function change(){
    var target = document.getElementById("target");
    var current = target.src;
    var url = prompt("change address to:", current);
    target.src= url;
}

首先，定义变量。 var url打开一个询问网址的提示窗口。 var target定义您要更改的图片。最后一行将var target的src更改为var url的值。 var current获取图片的当前网址，并将当前网址添加到文本框中 JSFiddle Demo

Answer 2

也许我不完全理解您的问题，但您可以使用JavaScript / HTML在新窗口中打开链接，其中包含以下代码：

<a href="#" onclick="window.open('newWindow.html', 'newName', 'width=300, height=250'); return false;">Click here</a>

新文档可以容纳您的图像的视图（或者，您可以将open()的第一个参数更改为图像本身），然后从该新窗口更改您的文本字段＆＃34;改变是网址。

Answer 3

这样的事可能吗？

IMG HTML：

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />

<强> JS：

$('img').on("click",function(){
    var win = window.open();
    var url = $(this).attr("src");
    var html = $("body").html("<textarea>" + url +"</textarea>");
    $(win.document.body).html(html);
});

<强>演示：

http://jsfiddle.net/HsTkf/10/

如果您正在寻找对话框：

你可以自己创造并做这样的事情。这仍然缺少一些东西，比如关闭它的方法，正确的定位以及什么不是。但是，如果您正在寻找它，那么还有更多高级对话库。

<强> HTML：

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />

<div class="prompt"></div>

<强> JS：

$('img').on("click",function(){
   var url = $(this).attr("src");
   $(".prompt").append("<textarea>" + url +"</textarea>");
   $(".prompt").addClass("show");
});

<强> CSS：

img {
    width:50px;
    height:50px;
}
.prompt {
   display:none;
    position:absolute;
    top:40%;
    left:40%;
    padding:10px;
    border:1px solid #ccc;
    -webkit-box-shadow: 3px 3px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 7px 0px rgba(50, 50, 50, 0.75);
}
.show {
    display:block;
}

<强>演示： http://jsfiddle.net/HsTkf/21/

<强>库：

Answer 4

我在jsfiddle中创建了一个例子..

当您点击图片时，它会在弹出的编辑模式中打开当前图片网址，您可以更改它。

function ChangeUrl(){ 
    var image1 = document.getElementById("image1");
    var url = prompt("change image source",image1.src);   
    image1.src= url;
}

参见工作示例： - http://jsfiddle.net/XUjAH/1094/

或者我为你创建了另一个jsfiddle，我使用了jquery对话框代替提示。

请参阅此工作示例： - http://jsfiddle.net/eDMmy/9/

感谢

单击图像打开弹出窗口

4 个答案: