点击图像打开弹出

Click image opens popup

本文关键字：图像      更新时间：2023-09-26

我想做的是点击一张图片，这会打开一个弹出窗口文本框里有image- url。这里应该可以更改URL，并通过更改image-URL。

我很不懂javascript，这就是为什么我寻求帮助。

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

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

我在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/

谢谢

也许我不完全理解你的问题，但是你可以使用JavaScript/HTML在一个新的窗口中打开一个链接，下面的代码:

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

这个新文档可以容纳您的图像视图(或者，您可以只是将open()的第一个参数更改为图像本身)，并且从这个新窗口中要更改的"textfield"是url。

这实际上非常简单。创建如下图像:

<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演示

可能是这样的?

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/情态动词
  2. http://jqueryui.com/dialog/
  3. http://www.ericmmartin.com/projects/simplemodal/
相关文章：