rgaspary/modal.html

## modal.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
    <button type="" class="modal_btn">Show Modal</button>
    <div class="modal_window">
      <h1>Hello world</h1>
      <button class="close_button">Close</button>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="modal.js"></script>
</body>
</html>

## modal.js
// SETTINGS

var modal = "modal_window";
var modal_bg = "modal_bg";
var modal_launcher = "modal_btn";
var modal_close_btn = "close_button";
var window_size;

var css_options = {
  border: "2px solid #000",
  bg_color: "#fff",
  width: '600',
  height: '400',
  border_radius: '8',
  modal_shade: "#000",
  z_index: 2
};

var modal_bg_options = {
  display: true,
  bg_color: "0, 0, 0", //Should be set as rgb values
  alpha: 0.5,
  z_index: 1
};

// FUNCTIONS

// ADD CSS
function get_window_size() {
  window_size = $(window).width();
}

function close_modal() {
  $('.' + modal_bg).hide();
  $('.' + modal).hide();
}

function apply_modal_css() {
  $('.' + modal).css({
    "-moz-border-radius": css_options.border_radius + 'px',
    "-webkit-border-radius": css_options.border_radius + 'px',
    backgroundColor: css_options.bg_color,
    border: css_options.border,
    borderRadius: css_options.border_radius + 'px',
    display: "none",
    height: css_options.height + 'px',
    left: '50%',
    marginLeft: '-' + (css_options.width / 2) + 'px',
    marginTop: '-' + (css_options.height / 2) + 'px',
    position: 'fixed',
    top: '50%',
    width: css_options.width + 'px',
    zIndex: css_options.z_index
  });

  $('.' + modal_close_btn).css({
    display: 'none'
  });
  apply_modal_bg_css();
}

function mobile_css() {
  $('.' + modal).css({
    "-moz-border-radius": css_options.border_radius + 'px',
    "-webkit-border-radius": css_options.border_radius + 'px',
    backgroundColor: css_options.bg_color,
    border: "none",
    borderRadius: 0,
    display: "none",
    height: 'auto',
    left: 0,
    margin: 0,
    position: 'fixed',
    top: 0,
    bottom: 0,
    right: 0,
    width: 'auto',
    zIndex: css_options.z_index
  });
}

function apply_modal_bg_css() {
  $('.' + modal_bg).css({
    backgroundColor: "rgba(" + modal_bg_options.bg_color + ", " + modal_bg_options.alpha + ")",
    bottom: 0,
    cursor: "pointer",
    display: "none",
    left: 0,
    position: "fixed",
    right: 0,
    top: 0,
    zIndex: modal_bg_options.z_index
  }).click(function () {
    close_modal();
  });
}

function set_css() {
  if (window_size <= 600) {
    mobile_css();
  } else {
    apply_modal_css();
  }

}

// FUNCTIONALITY

$('.' + modal_launcher).click(function () {
  if (window_size <= 600) {
    $('.' + modal_close_btn).show();
  } else {
    $('.' + modal_close_btn).hide();
  }
  if (modal_bg_options.display === true) {
    $('.' + modal_bg).show();
  }
  $('.' + modal).show();
});

$(window).resize(function () {
  get_window_size();
  set_css();
});

$(document).ready(function () {
  get_window_size();

  // ADD COMPONENTS
  $('.' + modal).after('<div class="' + modal_bg + '"></div>');
  set_css();
  $('.' + modal_close_btn).click(function () {
    close_modal();
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<button type="" class="modal_btn">Show Modal</button>
	<div class="modal_window">
	<h1>Hello world</h1>
	<button class="close_button">Close</button>
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="modal.js"></script>
	</body>
	</html>
	// SETTINGS

	var modal = "modal_window";
	var modal_bg = "modal_bg";
	var modal_launcher = "modal_btn";
	var modal_close_btn = "close_button";
	var window_size;

	var css_options = {
	border: "2px solid #000",
	bg_color: "#fff",
	width: '600',
	height: '400',
	border_radius: '8',
	modal_shade: "#000",
	z_index: 2
	};

	var modal_bg_options = {
	display: true,
	bg_color: "0, 0, 0", //Should be set as rgb values
	alpha: 0.5,
	z_index: 1
	};

	// FUNCTIONS

	// ADD CSS
	function get_window_size() {
	window_size = $(window).width();
	}

	function close_modal() {
	$('.' + modal_bg).hide();
	$('.' + modal).hide();
	}

	function apply_modal_css() {
	$('.' + modal).css({
	"-moz-border-radius": css_options.border_radius + 'px',
	"-webkit-border-radius": css_options.border_radius + 'px',
	backgroundColor: css_options.bg_color,
	border: css_options.border,
	borderRadius: css_options.border_radius + 'px',
	display: "none",
	height: css_options.height + 'px',
	left: '50%',
	marginLeft: '-' + (css_options.width / 2) + 'px',
	marginTop: '-' + (css_options.height / 2) + 'px',
	position: 'fixed',
	top: '50%',
	width: css_options.width + 'px',
	zIndex: css_options.z_index
	});

	$('.' + modal_close_btn).css({
	display: 'none'
	});
	apply_modal_bg_css();
	}

	function mobile_css() {
	$('.' + modal).css({
	"-moz-border-radius": css_options.border_radius + 'px',
	"-webkit-border-radius": css_options.border_radius + 'px',
	backgroundColor: css_options.bg_color,
	border: "none",
	borderRadius: 0,
	display: "none",
	height: 'auto',
	left: 0,
	margin: 0,
	position: 'fixed',
	top: 0,
	bottom: 0,
	right: 0,
	width: 'auto',
	zIndex: css_options.z_index
	});
	}

	function apply_modal_bg_css() {
	$('.' + modal_bg).css({
	backgroundColor: "rgba(" + modal_bg_options.bg_color + ", " + modal_bg_options.alpha + ")",
	bottom: 0,
	cursor: "pointer",
	display: "none",
	left: 0,
	position: "fixed",
	right: 0,
	top: 0,
	zIndex: modal_bg_options.z_index
	}).click(function () {
	close_modal();
	});
	}

	function set_css() {
	if (window_size <= 600) {
	mobile_css();
	} else {
	apply_modal_css();
	}

	}

	// FUNCTIONALITY

	$('.' + modal_launcher).click(function () {
	if (window_size <= 600) {
	$('.' + modal_close_btn).show();
	} else {
	$('.' + modal_close_btn).hide();
	}
	if (modal_bg_options.display === true) {
	$('.' + modal_bg).show();
	}
	$('.' + modal).show();
	});

	$(window).resize(function () {
	get_window_size();
	set_css();
	});

	$(document).ready(function () {
	get_window_size();

	// ADD COMPONENTS
	$('.' + modal).after('<div class="' + modal_bg + '"></div>');
	set_css();
	$('.' + modal_close_btn).click(function () {
	close_modal();
	});
	});