00. milkbox.js

function milkbox(uri){
  // 文字列としてエレメントを定義
  var eleStr = function(){/*
    <div id="milkbox_body" class="milk_wrap">
      <div class="milkbox_container">
          <div class="milkbox_content">
            <img src="CONTENT_URI">
            <div class="milkbox_button">x</div>
            <div id="loader_id" class="loader">
              <img src="img/load.gif">
            </div>
          </div>
      </div>
    </div>
  */}.toString().match(/\n([\s\S]*)\n/)[1];
  
  // 各種整形をおこなう
  eleStr = eleStr
    .trim() // 前後ゴミの抹殺
    .replace(/\n[\t\s]*/g, "") // タブや改行の抹殺(手抜き版)
    .replace("CONTENT_URI", uri); // 仮定義しておいたオレオレ定数の置換
  
  // bodyに埋め込む(文字列としてなので、innerHTMLもしくはinsertAdjacentHTMLで。)
  document.body.insertAdjacentHTML("beforeend", eleStr);
  
  // 各種イベントを生やす(querySelectorで手を抜いていく)
  var $root = $("#milkbox_body");
  
  // 親のイベント
  $root
    .addEventListener("click", milkbox_close ,false);
  
  // コンテナのイベント
  $root.querySelector(".milkbox_container")
    .addEventListener("click", function(){ flag = false; }, false);
  
  // img読み込み完了のイベント
  $root.querySelector(".milkbox_container>img")
    .addEventListener("load", contentLoaded, false);
  
  // ボタンのイベント
  $root.querySelector(".milkbox_button")
    .addEventListener("click", milkbox_close, false);
}

01. milkbox-手抜き.js

function milkbox(uri){
  // 文字列としてエレメントを定義
  var eleStr = function(){/*
    <div id="milkbox_body" class="milk_wrap" onclick="milkbox_close();">
      <div class="milkbox_container">
          <div class="milkbox_content" onclick="window.flag = false;">
            <img src="CONTENT_URI" onload="contentLoaded();">
            <div class="milkbox_button" onclick="milkbox_close();">x</div>
            <div id="loader_id" class="loader">
              <img src="img/load.gif">
            </div>
          </div>
      </div>
    </div>
  */}.toString()
    .match(/\n([\s\S]*)\n/)[1]
    .trim() // 前後ゴミの抹殺
    .replace(/\n[\t\s]*/g, "") // タブや改行の抹殺(手抜き版)
    .replace("CONTENT_URI", uri); // 仮定義しておいたオレオレ定数の置換
  
  // bodyに埋め込む(文字列としてなので、innerHTMLもしくはinsertAdjacentHTMLで。)
  document.body.insertAdjacentHTML("beforeend", eleStr);
}