Question

我的模式显示使用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>

Answer 1

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

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

如果要在同一窗口中打开网址，请从,'_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部分。

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

1 个答案: