Javascript 单击“模式”时如何在另一个选项卡中打开URL

我的模式显示带有iFrame的实习生URL。我正在寻找打开这个实习生网址时，你点击里面的模式

我的代码坏了。当我在模式中单击时，什么也没有发生。只有当我点击关闭按钮时，代码才起作用

谢谢你的帮助

查看更新了答案的代码。它仍然不起作用。我的关闭按钮不起作用了

$（'#cosmeto'）。单击（函数（）{
$（'#cosmetomodal'）.show（）.addClass（'modal-open'）；
});
$（'#closec'）。单击（函数（）{
var elem=$（“#美容模式”）；
elem.removeClass（“模态开放”）；
setTimeout（函数（）{
隐藏元素（）；
},200);
});
$（'#myiframe'）。在（'click'，function（）上{
elem.removeClass（“模态开放”）；
隐藏元素（）；
window.open（'google.fr'，''；
});
.cosmetomodel{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.8）；
z指数：9999；
填充顶部：100px；/*框的位置*/
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
}
.美容内容{
位置：固定；
宽度：60%；
最高：55%；
左：50%；
填充：15px；
背景色：#fafafa；
框大小：边框框；
不透明度：0；
转换：翻译（-50%，-50%）；
过渡：所有300毫秒的缓进缓出；
保证金：自动；
边界半径：5px；
溢出：滚动；
文本对齐：居中；
}
.cosmetomodal.modal-open#cosmeto内容{
不透明度：1；
最高：50%；
}
#myiframe{
位置：固定；
左：0；
z指数：999；
排名：0；
右：0；
底部：0；
光标：指针；
}

接近
您可以放置一个不可见的div
，该div覆盖被设置为绝对的弹出窗口区域，并使用javascript来说明何时单击它转到url。必须使用css设置正确的z索引

工作区：

从
窗口中删除
，“空白”
。打开（'https://google.com","空白",，”而不是“code>”

HTML:

JS:

编辑：要修复滚动条，您可以将绝对覆盖div设置为从右侧开始30px（或使用%），如下所示：

.myiframe {
  position: absolute;
  left:0;
  z-index: 2;
  top:0;
  right:30px;
  bottom:0;
  cursor: pointer;
}

以及占据整个模态宽度的iframe：

.cosmeto-content iframe {
  width: 100%;
}

编辑2:一种稍微不同的方法，而我开始了解您在寻找什么：

我已将iframe设置为显示其整个高度，但弹出窗口的高度是固定的，因此您将只滚动弹出窗口，同时保留不可见的div（带有链接和滚动功能）。我还必须将按钮放在外面（也检查html部分。
我认为您只需要添加
target=“\u blank”
对于您的标记，我已经做了，但仍然没有做任何事情：-/如果您留下一个向上投票，并记住验证答案，我会告诉您如何做。我非常确定在周围包装一个锚标记和iframe是不好的语法。锚标记是内联元素，而iframe是块元素。内联元素不应该包含块元素。您可以吗尝试添加带有
target=“\u blank”的
base
标记
在您的head元素中，如所示？它不起作用：-/I添加了CSS代码、html代码和Javascript。当我单击iFrame时，什么都没有发生，我的关闭按钮也不起作用了它起作用了，我现在用工作的jsfiddle更新它，Javascript文件中有或没有空白，都是一样的：-/I发现一个轻微的不同的解决方案，让我知道你的想法：（我已经将iframe设置为显示其整个高度，但弹出窗口的高度是固定的，因此你只需滚动弹出窗口，同时保留带有链接和滚动功能的不可见div）。此外，我还必须将按钮放在外面（也检查html部分）。因为弹出窗口被视为“视图”我在iframe上使用了height:100vh（查看高度），只允许弹出窗口滚动（弹出窗口和带有滚动条的iframe都不好），因此这种方式由于覆盖的不可见div覆盖了iframe，而不是弹出窗口，因此可以单击iframe，同时可以向下滚动（弹出窗口）。
var elem = $('#cosmetomodal');
$('#cosmeto').click(function() {
  $('#cosmetomodal').show().addClass('modal-open');
});

$('.myiframe').on('click', function(){
  elem.removeClass('modal-open');
  elem.hide();
  window.open('https://google.com','_blank');
});

$('#closec').click(function() {
  elem.removeClass('modal-open');
  setTimeout(function() {
    elem.hide();
  },200);
});

.myiframe {
  position: absolute;
  left:0;
  z-index: 2;
  top:0;
  right:30px;
  bottom:0;
  cursor: pointer;
}

.cosmeto-content iframe {
  width: 100%;
}