seth-shaw-unlv/copyright-acknowledgement-demo.html

## copyright-acknowledgement-demo.html
<html>
<head></head>
  <style>
/* Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal .modal-content{
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
}

form#copyright-acknowledgement-form button {
  display: block;
  margin: auto;
  margin-top: .5em;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  clear: both;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Download link button */
div.modal-link-button {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    padding: 5px;
    text-align: center;
}
div.modal-link-button:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}
  </style>
<body>
  <div id="download-modal-link">Download Original File: whh00004.tif (XX bytes)</div>
  <div id='copyright-acknowledgement'>
    <div id='copyright-acknowledgement-text' class='modal-content'>
      <span id="copyright-acknowledgement-close-button" class="close">&times;</span>
      <h3>Copyright &amp; Fair-use Agreement</h3>
      <p>UNLV Special Collections provides copies of materials to facilitate private study, scholarship, or research. We welcome you to use materials in our collections that are in the&nbsp;<a href="https://copyright.cornell.edu/publicdomain">public domain</a>&nbsp;and to make&nbsp;<a href="https://www.copyright.gov/fls/fl102.html">fair use</a>&nbsp;of copyrighted materials as defined by&nbsp;<a href="https://www.copyright.gov/title17/">copyright law</a>. Please&nbsp;<a href="http://library.unlv.edu/speccol/research_and_services/citing">cite&nbsp;us</a>.</p>
      <blockquote class="wp-block-quote"><p>The copyright law of the United States (<a href="https://www.copyright.gov/title17/">Title 17 United States Code)&nbsp;</a>governs the making of reproductions of copyrighted material. Under certain conditions specified in the law, libraries and archives are authorized to furnish a reproduction. One of these specified conditions is that the reproduction is not to be “used for any purpose other than private study, scholarship, or research.” If a researcher uses a reproduction for purposes in excess of “<a href="https://www.copyright.gov/fls/fl102.html">fair use</a>,” that researcher may be liable for copyright infringement.</p></blockquote>

    <form id="copyright-acknowledgement-form" method="get" action="whh000004.tif" target="_blank">
      <input name="copyright-acknowledgement" type="checkbox" value="agreed" required>
      <label for="copyright-acknowledgement">I acknowledge the above statement about the fair use of these materials.</label>
      <button type="submit">Download</button>
    </form>
    </div>
  </div>
  <script>
    // Enable the modal (which will also hide it).
    var copyrightAcknowledgement = document.getElementById("copyright-acknowledgement");
    document.getElementById("copyright-acknowledgement").classList.add("modal");

    // Turn the download text into a modal button.
    var modalLink = document.getElementById("download-modal-link");
    modalLink.onclick = function() {
      document.getElementById("copyright-acknowledgement").style.display = "block";
    }
    modalLink.classList.add('modal-link-button');

    // Closing the modal, button and outside modal
    var span = document.getElementById("copyright-acknowledgement-close-button");
    span.onclick = function() {
      copyrightAcknowledgement.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == copyrightAcknowledgement) {
        copyrightAcknowledgement.style.display = "none";
      }
    }
  </script>
</body>
</html>
	<html>
	<head></head>
	<style>
	/* Modal */
	.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal .modal-content{
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	max-width: 600px;
	}

	form#copyright-acknowledgement-form button {
	display: block;
	margin: auto;
	margin-top: .5em;
	}

	/* The Close Button */
	.close {
	color: #aaa;
	float: right;
	clear: both;
	font-size: 28px;
	font-weight: bold;
	}
	.close:hover,
	.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}

	/* Download link button */
	div.modal-link-button {
	display:inline-block;
	color:#444;
	border:1px solid #CCC;
	background:#DDD;
	box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
	cursor:pointer;
	vertical-align:middle;
	padding: 5px;
	text-align: center;
	}
	div.modal-link-button:active {
	color:red;
	box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
	}
	</style>
	<body>
	<div id="download-modal-link">Download Original File: whh00004.tif (XX bytes)</div>
	<div id='copyright-acknowledgement'>
	<div id='copyright-acknowledgement-text' class='modal-content'>
	<span id="copyright-acknowledgement-close-button" class="close">×</span>
	<h3>Copyright & Fair-use Agreement</h3>
	<p>UNLV Special Collections provides copies of materials to facilitate private study, scholarship, or research. We welcome you to use materials in our collections that are in the <a href="https://copyright.cornell.edu/publicdomain">public domain</a> and to make <a href="https://www.copyright.gov/fls/fl102.html">fair use</a> of copyrighted materials as defined by <a href="https://www.copyright.gov/title17/">copyright law</a>. Please <a href="http://library.unlv.edu/speccol/research_and_services/citing">cite us</a>.</p>
	<blockquote class="wp-block-quote"><p>The copyright law of the United States (<a href="https://www.copyright.gov/title17/">Title 17 United States Code) </a>governs the making of reproductions of copyrighted material. Under certain conditions specified in the law, libraries and archives are authorized to furnish a reproduction. One of these specified conditions is that the reproduction is not to be “used for any purpose other than private study, scholarship, or research.” If a researcher uses a reproduction for purposes in excess of “<a href="https://www.copyright.gov/fls/fl102.html">fair use</a>,” that researcher may be liable for copyright infringement.</p></blockquote>

	<form id="copyright-acknowledgement-form" method="get" action="whh000004.tif" target="_blank">
	<input name="copyright-acknowledgement" type="checkbox" value="agreed" required>
	<label for="copyright-acknowledgement">I acknowledge the above statement about the fair use of these materials.</label>
	<button type="submit">Download</button>
	</form>
	</div>
	</div>
	<script>
	// Enable the modal (which will also hide it).
	var copyrightAcknowledgement = document.getElementById("copyright-acknowledgement");
	document.getElementById("copyright-acknowledgement").classList.add("modal");

	// Turn the download text into a modal button.
	var modalLink = document.getElementById("download-modal-link");
	modalLink.onclick = function() {
	document.getElementById("copyright-acknowledgement").style.display = "block";
	}
	modalLink.classList.add('modal-link-button');

	// Closing the modal, button and outside modal
	var span = document.getElementById("copyright-acknowledgement-close-button");
	span.onclick = function() {
	copyrightAcknowledgement.style.display = "none";
	}
	window.onclick = function(event) {
	if (event.target == copyrightAcknowledgement) {
	copyrightAcknowledgement.style.display = "none";
	}
	}
	</script>
	</body>
	</html>