haruhiko-zht

## child.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
  <a id="modal-picture" href="img/picture.jpg"><img src="img/picture.jpg"></a>

## stylesheet.css
#bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#photo {

## script.js
$(function() {
  $("#iframe-child").on("load", function() {
    $("#iframe-child").contents().find("#modal-picture").click(function() {

      $("body").append('<div id="bg"></div>');
      $("body").append('<div id="photo"></div>');

      $("#bg").hide();
      $("#photo").hide();


## parent.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/stylesheet.css">
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>

## script.js
if(window == window.parent) {
    alert("親ページです");
  } else {
    alert("子ページです");
  }

## script.js
  if(window == window.parent) {
    $("body").css("min-width","1080px");
  }

## index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/stylesheet.css">
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>

## stylesheet.css
#links-content {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: rgba(0,0,0,0.6);
  display: flex;
}

#content {
  width: 470px;

## script.js
$(function(){

  // クリックされた時に関数を呼び出す
  $("#tab a").click(function(){
    links_slide();
  });

  // 関数
  function links_slide(){
    if($("#links-content").css("left").replace("px","") < 0){

## index.html
<body>
  <div class="aaa"></div>
  <div class="bbb">
    <div class="ccc"></div>
  </div>
</body>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/stylesheet.css">
	</head>

	<body>
	<a id="modal-picture" href="img/picture.jpg"><img src="img/picture.jpg"></a>
	#bg {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	}

	#photo {
	$(function() {
	$("#iframe-child").on("load", function() {
	$("#iframe-child").contents().find("#modal-picture").click(function() {

	$("body").append('<div id="bg"></div>');
	$("body").append('<div id="photo"></div>');

	$("#bg").hide();
	$("#photo").hide();
	if(window == window.parent) {
	alert("親ページです");
	} else {
	alert("子ページです");
	}
	if(window == window.parent) {
	$("body").css("min-width","1080px");
	}
	#links-content {
	width: 500px;
	height: 500px;
	position: relative;
	background-color: rgba(0,0,0,0.6);
	display: flex;
	}

	#content {
	width: 470px;
	$(function(){

	// クリックされた時に関数を呼び出す
	$("#tab a").click(function(){
	links_slide();
	});

	// 関数
	function links_slide(){
	if($("#links-content").css("left").replace("px","") < 0){
	<body>
	<div class="aaa"></div>
	<div class="bbb">
	<div class="ccc"></div>
	</div>
	</body>