零基础学做网站培训介绍

当前位置:

如何实现超链接弹窗打开

在学做网站论坛的HTML入门教程中,我们介绍了超链接是建网站过程中最常用的一个标签。超链接常见打开方式有本窗口打开和新窗口打开。

今天要介绍的是如何实现超链接弹窗打开,就是点击一个超链接时会弹出一个窗口来打开链接的页面。效果如下图:

超链接弹窗打开

实现超链接弹窗打开需要借助JS来实现,代码如下:


<a rel='nofollow' class='open-new-link'>在线客服</a>

<script>
    $(function() {
      $('.open-new-link').on('click', function() {
        var openNewLink = window.open('http://p.qiao.baidu.com/', '学做网站论坛咨询', 'height=650, width=760, top=50%, left=50%,margin-left:-380,margin-top:-325, toolbar=no, menubar=no, scrollbars=no, resizable=false, location=no, status=no'); //参数: url, 名称, 窗体样式
        if(window.focus) {
          openNewLink.focus();
        }
        return false;
      })
    })
  </script>

可以修改上面代码里的链接地址和名称,这样就可以实现超链接弹窗打开效果了。

相关阅读:

DEDECMS网站登录框如何制作成弹窗登录

如何给button按钮添加点击弹出窗口(jquery事件)

wordpress前端弹窗注册登陆功能怎么做

发表评论

电子邮件地址不会被公开。 必填项已用*标注