如何设置字形按钮以打开新的弹出窗口答案

【问题标题】：How to set glyphicon button to open new popup window如何设置字形按钮以打开新的弹出窗口
【发布时间】：2016-07-16 10:16:24
【问题描述】：

我无法将此按钮设置为弹出一个新窗口。请注意，我正在使用 glyphicon 按钮。我知道在Open links in new window using AngularJS 中提到使用 $window，但我认为它与我的情况不同。

  <td class="text-left">
                    <div class="btn-group">
                        <div class="btn"><i class="glyphicon glyphicon-edit"></i></a>

【问题讨论】：

Open links in new window using AngularJS的可能重复
您是否缺少锚标记的开头？？请发布正确的 HTML

标签： html glyphicons

【解决方案1】：

每个人都提到 target="_blank" 通过包装锚标记是正确的，但使用 class="glyphicon glyphicon-new-window" 不编辑类。

【讨论】：

【解决方案2】：

看起来你用<div class="btn">开始一个按钮，但用</a>结束它，所以这些基本的html标签不匹配。我会使用<a class="btn" target="_blank" href="#"> 替换<div class="btn">。

target="_blank" 是为超链接设置的属性（<a> 标签）以打开新窗口（标签）

据我所知，Glyphicon 实际上与弹出新窗口完全无关。它只是一些漂亮的按钮图标，您可以将它们放入 html 中以使您的页面看起来更好。 Glyphicon 的实际部分是<i class="glyphicon glyphicon-edit"></i>。它只是一个图标。

要弹出一个新窗口，你可以选择使用我上面提供的超链接方法，也可以使用像这样的javascript：

var btns = document.getElementsByClassName('btn');
btns[0].onclick = function(){
    window.open('about:blank');
}

btns[0] 代表“btn”类的第一个元素，window.open('about:blank') 打开一个新的空白窗口

【讨论】：

【解决方案3】：

1) 我建议你先使用<button class="btn"><i class="glyphicon glyphicon-edit"></i></button> 或<a class="btn"><i class="glyphicon glyphicon-edit"></i></a>。

2) 你有一些选择： 2.a）添加一个像$('#btn_id').on('click', function() {});这样的监听器 2.b) 将onClick 属性放在<button> 或<a> 标签内

被调用的函数将包含弹出配置。

【讨论】：