如何在网站上创建仅显示文本的简单弹出窗口

how to create a simple popup window displaying only text, on a web site

本文关键字：文本 简单 窗口 显示 网站 创建      更新时间：2023-09-26

我不是程序员，我使用主要托管服务的应用程序创建了一个网站。我想将代码插入托管服务提供的框中，该框允许您粘贴任何 HTML 代码。

我想在网站上创建一个链接，该链接打开一个弹出窗口以显示我硬编码到代码中的文本。我不想跳转到另一个 HTML 页面。

我在下面找到了以下代码，它允许我跳转到另一个 HTML 页面（它被设置为 CNN.com 作为示例）。有没有办法用打开弹出窗口并显示以下示例文本"hello world"来替换跳转到另一个 HTML 页面的操作。（请注意，在下面的代码中，我删除了代码开头和结尾的开始和结束"a"标签，因为当我在这个网站上输入这个问题时，它们的包含会导致问题）。 

<a href="http://www.cnn.com" onclick="javascript:void window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;">Pop-up Window</a>

谢谢

无需Jquery即可轻松制作弹出窗口。只需复制此代码并粘贴即可。并覆盖开放文本。显示弹出窗口。

    <p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
          document.getElementById('box').style.display='block';">open</a> 
    </p>
 <div id="shadowing"></div>
    <div id="box">
       <span id="boxclose" onClick="document.getElementById('box').style.display='none';
       document.getElementById('shadowing').style.display='none'">close </span>
 <div id="boxcontent">    
    And this is the static content of the box. <br><br>
    Dynamic content in the next demo...    
    </div>
 </div>
    <style type="text/css">
    #shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10;    opacity:0.5; filter: alpha(opacity=50);}
    #box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}   
    #boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat;    background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
    #boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%;   overflow:hidden;}
    </style>
您可以将

函数放在<head>部分中，也可以从.js文件中提取函数。这将打开一个窗口并加载所需的 URL。它不会重定向原始页面，因为您使用 # 而不是实际 url。
<script> function popup(){ window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0') } </script> <a href="#" onclick="popup()">link</a>

相关文章：