WarnBar.js

Simplest way

Insert this code to the head section of your document.

<script>
  !function (e, n, t, o, c, a, i) {
  e.WarnBarObject = c, e[c] = e[c] || function () { (e[c].q = e[c].q || []).push(arguments) },
  e[c].l = 1 * new Date, a = n.createElement(t), i = n.getElementsByTagName(t)[0], a.src = o, i.parentNode.insertBefore(a, i)
  }(window, document, 'script', '//cdn.pecha.pro/warnBar/latest.min.js', 'warnBar');
  warnBar('your-development.site.com', 'This page is only for development.<br/><a href="https://www.your-production-site.com">I want go to www.your-production-site.com</a>', 'I know what it is, show me page');
</script>

You can view DEMO.