單擊圖像打開彈出窗口

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將打開一個提示窗口，要求您提供url。 var target定義您要更改的圖像。 最后一行將var target的src更改為var url的值。 var current獲取圖像的當前URL，並將當前URL添加到文本框中。
JSFiddle演示

Answer 2

也許我不太了解您的問題，但是您可以使用JavaScript / HTML在新窗口中使用以下代碼打開鏈接：

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

該新文檔可以容納您圖像的視圖（或者，您可以只將open()的第一個參數更改為圖像本身），然后從該新窗口中更改的“文本字段”就是url。

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/

圖書館：

1. http://getbootstrap.com/javascript/#modals
2. http://jqueryui.com/dialog/
3. http://www.ericmmartin.com/projects/simplemodal/

Answer 4

我在jsfiddle中創建了一個示例。

當您單擊圖像時，它將在彈出窗口中以編輯模式打開當前圖像URL，您可以對其進行更改。

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/

謝謝