时间戳

首页 > 解决方案 > 单击模式时如何在另一个选项卡中打开 URL

javascript - 单击模式时如何在另一个选项卡中打开 URL

问题描述

我的模态显示带有 iFrame 的实习 URL。当您在模态框内单击时，我希望打开这个实习生 URL。

我的下面的代码不起作用。当我在模态框内单击时，什么也没有发生。该代码仅在我单击关闭按钮时才有效。

感谢帮助

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

$('#cosmeto').click(function() {
  $('#cosmetomodal').show().addClass('modal-open');
});

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

$('#myiframe').on('click', function(){
  elem.removeClass('modal-open');
  elem.hide();
  window.open('google.fr','');
});
.cosmetomodal {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.8);
  z-index:9999;

    padding-top: 100px; /* Location of the box */

    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.cosmeto-content {
  position:fixed;
  width:60%;
  top:55%;
  left:50%;
  padding:15px;
  background-color:#fafafa;
  box-sizing:border-box;
  opacity:0;
  transform: translate(-50%,-50%);  
  transition:all 300ms ease-in-out;
  margin: auto;
  border-radius: 5px;
  overflow: scroll;
  text-align: center;
}

.cosmetomodal.modal-open #cosmeto-content {
  opacity:1;
  top:50%;
}

#myiframe {
  position: fixed;
  left:0;
  z-index: 999;
  top:0;
  right:0;
  bottom:0;
  cursor: pointer;
}
				<div id="cosmetomodal" class="cosmetomodal" style="display:none;">
				  	<div id="cosmeto-content" class="cosmeto-content">
				  		<div id="myiframe"></div>
					    	<iframe src="principes_actifs.html" onload="iframeResize(this);" style="border:none;" ></iframe>
					    	<button id="closec" type="button">Close </button>
					</div>
				</div>			

				<div id="file" class ="container">
					<input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" height="250px" width="250px" />
				</div>

标签： javascriptjqueryhtmlcss

解决方案

您可以放置​​一个不可见的 div ，该 div<div class="myiframe"></div>覆盖设置为绝对的弹出窗口区域，并使用 javascript 来表示单击它时转到 url。必须使用 css 设置正确的 z-indexes。

工作jsfiddle：http: //jsfiddle.net/e351ck0d/1/

如果想在同一个窗口中打开 url，请,'_blank'删除并window.open('https://google.com','_blank');改为写入。,'_self'

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="file" class ="container">
                    <input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" height="250px" width="250px"/>
                </div>
                <div id="cosmetomodal" class="cosmetomodal" style="display:none;">
                    <div id="cosmeto-content" class="cosmeto-content">
              <div class="myiframe"></div>
                            <iframe  src="principes_actifs.html" onload="iframeResize(this);"></iframe>
                            <button id="closec" type="button">Close </button>
</div>
</div>

CSS：

.cosmetomodal {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.8);
  z-index:9999;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

.cosmeto-content {
  position:fixed;
  margin-bottom: 150px;
  width:70%;
  left:50%;
  padding:15px;
  background-color:#fafafa;
  box-sizing:border-box;
  opacity:0;
  transform: translate(-50%,-50%);  
  transition:all 300ms ease-in-out;
  border-radius: 5px;
  overflow: scroll;
  text-align: center;
  z-index: 1;
}

.cosmetomodal.modal-open #cosmeto-content {
  opacity:1;
  top:50%;
  overflow: scroll;
}

.myiframe {
  position: absolute;
  left:0;
  z-index: 2;
  top:0;
  right:0;
  bottom:0;
  cursor: pointer;
}
#closec {
  position: absolute;
  z-index: 99999;
}

JS：

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);
});

编辑：要修复滚动条，您可以将绝对覆盖 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：稍微不同的方法，虽然我开始了解你在寻找什么：http: //jsfiddle.net/e351ck0d/2/

我已将 iframe 设置为以整个高度显示，但弹出窗口的高度是固定的，因此您只会滚动弹出窗口，同时保持不可见的 div 具有链接和滚动功能）。我还必须将按钮放在外面（也检查 html 部分。

推荐阅读