Skip to content

Instantly share code, notes, and snippets.

@okumurakengo
Created October 19, 2020 19:17
Show Gist options
  • Save okumurakengo/bfa7f7b5e508343f2ec9d10c286d3154 to your computer and use it in GitHub Desktop.
Save okumurakengo/bfa7f7b5e508343f2ec9d10c286d3154 to your computer and use it in GitHub Desktop.
jquery thickbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./jquery-thickbox/thickbox.css">
</head>
<body>
<button>ボタン</button>
<br>
<div id="main">
<a href="#TB_inline?height=155&width=300&inlineId=aaa" class="thickbox" title="Inline">
click
</a>
<br>
</div>
<br>
<div id="aaa" style="display: none;">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.js" integrity="sha512-xP2LEJAjRf8m9Vo/qsQmXCcFRV8DbCI87KmEpa0qywVBIozSNkOfS3ZU9wDSPfAryB5TiV7wQQtafqtwtJNOlw==" crossorigin="anonymous"></script>
<script src="./jquery-thickbox/thickbox.js"></script>
<script>
// https://github.com/nikosd/jquery-thickbox
$('button').click(function() {
$.get('./api.html', function(data) {
var div = document.createElement('div');
div.innerHTML = data
tb_init(div.querySelector('.thickbox'))
$('#main').append(div)
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment