使用javascript处理弹出窗口

我有一个基本页面，其中有一个“添加链接”按钮，点击后您会看到一个弹出窗口。弹出窗口有一个表单域来输入链接。一旦输入链接，我想刷新基本页面 - 基本页面不应该再是“添加链接”，而是更改为在弹出窗口中输入的超链接。使用javascript处理弹出窗口

我是新来的Javascript和HTML。我到目前为止已经设法在基本页面上创建一个按钮，并且点击后会显示一个带有链接表单字段的弹出窗口。但是，我无法使用新链接刷新基本页面。

下面是我的代码：

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="myFunction()">Add Link</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    prompt("Please Enter the Link"); 
} 
</script> 

</body> 
</html>

来源

2013-07-10 user2521326

以下几点每次按下按钮时，都会显示提示，一旦该提示关闭，脚本将为demo div添加一个新的<a href=value>New Link</a>标签。

<!DOCTYPE html> 
<html> 
    <body> 
     <button onclick="myFunction()">Add Link</button> 
     // This needs to be a 'div' so it can have elements inside it.    
     <div id="demo"></div> 
     <script> 
      var demo = document.getElementById('demo'); 
      function myFunction() 
      { 
       // Stores the value from the prompt() in the variable 'value' 
       var value = prompt("Please Enter the Link"); 
       var link = document.createElement('a'); // Create an <a> tag 
       link.setAttribute('href', value); // Set the link's URL to the value. 
       link.innerHTML = "New Link"; // Set the link's display text. 
       demo.appendChild(link); // Add the link to the demo div. 
      } 
     </script> 
    </body> 
</html>

希望这些意见解释它是如何工作的，如果不是只问这里:)

来源

2013-07-10 19:22:38 Blam

嗨，谢谢你的回应。你可以让我知道如何删除基本页面上的“添加链接”选项，一旦新的链接已被添加？ – user2521326

试试这个：

<button onclick="myFunction()">Add Link</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    var url = prompt("Please Enter the Link"); 
    window.location = url; 
} 
</script>

http://jsfiddle.net/douglasloyo/rtghQ/ 认为是可以接受的JS提琴唯一的价值将是http://jsfiddle.net/

干杯

来源

2013-07-10 19:15:52

嗨道格拉斯，我不想去添加后添加的链接。我想链接被显示在“添加链接”的地方作为“新链接” – user2521326

你需要一些方法来存储在服务器上的链接;刷新页面将导致一切都被重新执行，并且你不能真正动态地改变自己的html文件。像django这样的postgresql数据库很容易设置，但这超出了你的问题的范围。

也就是说，如果你可以在刷新页面时保持链接不生效，可以使用文本区域而不是提示。举个例子，如果您有jQuery的：

<head> 
<script> 
$(function() { 
$("#addLink").click(function() { 
    var linkStr = document.getElementById("linkInput").value; 
    $("#linkArea").html("<a href=" + linkStr + ">Your link</a>"); 
}); 
}) 
</script> 
</head> 

<span id="linkArea"> 
    <input id="addLink" type="submit" value="Add Link: "> 
    <input id="linkInput" type="text" value="(enter link)"> 
</span>

这里有一个的jsfiddle尝试一下： http://jsfiddle.net/tRcUp/

哦，一般你应该把脚本头标记。

来源

2013-07-10 19:27:32 Will

使用javascript处理弹出窗口

回答

相关问题