twbs: modal.

javascript (jquery) test usage as image viewer

by Anov Siradj

HTML

<div class="modal"><div class="modal-dialog modal-lg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
</div>
<div class="modal-content">
<img src="http://placehold.it/1024x2048" class="img-thumbnail"/>
</div></div></div>

<div style="width:200px;padding:32px;">
  <button type="button" class="btn btn-primary">modal</button>
  <pre id="trace-output"></pre>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS

@import url("//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css");

.modal-header {
  padding:0;
  border:0;
  position: absolute;
  top: 4px;
  right: 4px;
  left: 0;
  z-index: +1;
}

.img-thumbnail {
  padding:0;
  border-radius:0;
}

JavaScript

function trace(obj) {
	console.log(obj)
  $('#trace-output').get(0).textContent += obj + '\n'
}

(function() {

	var $modal = $('.modal:first', document.body).modal({
  	show: false,
    backdrop: 'static',
    keyboard: false
  }).on('show.bs.modal', function() {
  	trace('open modal');
  }).on('shown.bs.modal', function() {
  // because bootstrap set horizon-padding 17px
  	this.style.paddingLeft = 0;
  	this.style.paddingRight = 0;
		trace('modal opened')
  }).on('hide.bs.modal', function() {
  	trace('hide modal')
  }).on('hidden.bs.modal', function() {
  	trace('modal hidden')
  })

	$('.btn').on('click', function() {
  	$modal.modal('show')
  })

})()