Я хотел бы связать еще один html (nytimes.html) на той же странице поверх этого всплывающего кадра css. Как мне это сделать?
$('.portfolio-thumbnail').click(function(e) {
console.log(this.id); //this is how we know what to load into the frame
$('#popup-frame').fadeIn();
switch(this.id) {
case "nytimes":
//do something for nytimes
$('#popup-frame').css('background', "rgba(0, 255,0, .5)" );
break;
case "eloquence":
$('#popup-frame').css('background', "rgba(255, 82, 145, .5)" );
break;
default:
break;
}
});
Я бы лично посоветовал вам встроить iFrame в свой CSS-всплывающее окно с сайтом внутри него, который вы хотите показать, т.е.
case "nytimes":
//do something for nytimes
$('#popup-frame').css('background', "rgba(0, 255,0, .5)" );
$('#popup-frame').html('<iframe src="nytimes.html" name="popupFrame" scrolling="auto" frameborder="no" align="center" height = "100%" width = "100%"> </iframe>')
break;
Затем вы можете настроить iFrame, чтобы посмотреть, как вы хотите, в том числе использовать свойство css zoom для iframe, чтобы уменьшить размер содержимого, если вы хотите замедлить "предварительный просмотр" страницы.
$('#popup-frame').load('nytimes.html')
сделает это.