joi's cite button

gistfile1.txt

this is it.
The HTML is pre-generated.
The cite button just change the display to not hidden so the div appears.

modal.css

<style>
.modal,
.modal-box {
  z-index: 900;
}
.modal-trigger {
    font-weight: bold;
}
.modal-sandbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
}

.modal {
  display: none; 
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.8);
  overflow: auto;
  animation-name: modal;
  animation-duration: .3s;
  animation-timing-function: ease-out;
}

.modal-box {
  position: relative;
  width: 90%;
  max-width: 920px;
  margin: 100px auto;
  animation-name: modalbox;
  animation-duration: .3s;
  animation-timing-function: ease-out;
}

.modal-header {
    background: #f1f1f1;
    border-color: #036;
    border-bottom-style: solid;
    border-bottom-width: 1px;
	padding: 10px 20px 10px 25px;
}
.modal-title {
    margin-bottom: 0;
    font-size: 1rem;
}
.modal-body {
    background: #fafafa;
    padding: 60px 40px 30px 5px;
    font-size: .8rem;
}
ul#citation-formats {
    list-style-type: none;
}
li.citation-format {
	margin-bottom: 4em;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}
	.citation-format-name {
		font-style: italic;
		margin-bottom: 2px;
	}
	.citation-formatted {
		padding-left:5%;
		word-wrap: break-word;
		}
/* Close Button */
.close-modal {
    cursor: pointer;
    float: right;
	text-align: right;
    width: 50px;
}

/* Animation */
@-webkit-keyframes modalbox {
  0% {
    top: -0; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}

@keyframes modalbox {
  0% {
    top: 0; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}
</style>

modal.html

<div class="modal" id="modal-name" style="display: none;">
<div class="modal-sandbox"></div>
	<div class="modal-box">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<div class="close-modal">✖</div>
				<h4 class="modal-title">Cite</h4>
			</div>
			<div class="modal-body">

				<ul id="citation-formats">

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">APA</div>
							<div class="citation-formatted">Ito, J. (2018, May 28). Citing Blogs. <em>Joi Ito's Web</em> [Blog post]. https://joi.ito.com/weblog/2018/05/28/citing-blogs.html</div>
						</div>
					</li>

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">MLA</div>
							<div class="citation-formatted">
								Ito, Joichi. “Citing Blogs.” <em>Joi Ito's Web</em>,
								28 May 2018
								 https://joi.ito.com/weblog/2018/05/28/citing-blogs.html.
								 Accessed 29 May 2018							 </div>
						</div>
					</li>

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">Chicago (CMS)</div>
							<div class="citation-formatted">
								Ito, Joichi. “Citing Blogs.” <em>Joi Ito's Web</em> (Blog),
								 May 28, 2018, 
								 https://joi.ito.com/weblog/2018/05/28/citing-blogs.html
							 </div>
						</div>
					</li>

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">Harvard</div>
							<div class="citation-formatted">Ito, J. (2018). Citing Blogs. <em>Joi Ito's Web</em>. https://joi.ito.com/weblog/2018/05/28/citing-blogs.html</div>
						</div>
					</li>

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">Vancouver</div>
							<div class="citation-formatted">Ito J. Citing Blogs. Joi Ito's Web [Internet]. 2018 May 28; Available from: https://joi.ito.com/weblog/2018/05/28/citing-blogs.html</div>
						</div>
					</li>

					<li class="citation-format">
						<div class="citation">
							<div class="citation-format-name">Bibtex</div>
							<div class="citation-formatted">
<pre>@online{Ito2018CitingBlog,
	author={Ito, Joichi},
	title={Citing Blogs},
	journal={Joi Ito's Web},
	type = {Blog},
	url={https://joi.ito.com/weblog/2018/05/28/citing-blogs.html}, 
	date={2018-05-28},
	urldate = {2018-05-28}
	year={2018},
	month={05},
	day={28}
}</pre>
							</div>
						</div>
					</li>

				</ul>
			</div>
			<div class="modal-footer">
				<button class="close-modal">Close!</button>
			</div>
		</div>
	</div>
</div>

modal.js

$(".modal-trigger").click(function(e){
  e.preventDefault();
  dataModal = $(this).attr("data-modal");
  $("#" + dataModal).css({"display":"block"});
});

$(".close-modal, .modal-sandbox").click(function(){
  $(".modal").css({"display":"none"});
});


(function() {
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
    preTags = document.getElementsByClassName('citation-formatted');
    for(var i=0;i<preTags.length;i++) {
        preTags[i].onclick = function() {selectText(this)};
    }
})();