JS之弹出说明框

最新推荐文章于 2022-01-01 23:55:06 发布

flyever581549

最新推荐文章于 2022-01-01 23:55:06 发布

阅读量884

点赞数

本文链接：https://blog.csdn.net/flyever581549/article/details/2783408

版权

一、函数说明

 
 <script language=javascript>
      var p=window.createPopup();
     function showComment(comment,id)//显示说明框 
     {
                p.document.body.style.backgroundColor="red";
                p.document.body.style.border=" 1px";
                p.document.body.innerHTML=comment;
                p.show(0,0,200,50,document.getElementById(id));
       }
       function closeComment()//关闭说明框 
      {
             p.show(0,0,0,0,document.getElementById("comment"));//此处只要前四个参数全为0就可以，最后一个可以随便写。
      }
    </script>
 

在项目中，有时为了界面友好，我们可以使用弹出说明框的形式来提示用户。

如下图所示：

鼠标未移至链接处：

鼠标移至链接处：

二、源码如下：

 
 <html>
    <head>
        <title>test</title>
        <script language=javascript>
            var p=window.createPopup();
            function showComment(comment,id)
            {
                //var p=window.createPopup(); 
                p.document.body.style.backgroundColor="red";
                p.document.body.style.border=" 1px";
                p.document.body.innerHTML=comment;
                p.show(0,0,200,50,document.getElementById(id));
            }
            function closeComment()
            {
                p.show(0,0,0,0,document.getElementById("comment"));
            }
        </script>
        
    </head>
    <body>
        <a href="http://www.baidu.com"  οnmοuseοver="showComment('This a Comment !','comment')" οnmοuseοut="closeComment()">This a Comment</a><span id="comment"> </span>
    </body>
</html>
 

flyever581549

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之弹出说明框

一、函数说明 var p=window.createPopup(); function showComment(comment,id)//显示说明框 { p.document.body.style.backgroundColor="red"; p.document.body
复制链接

扫一扫