Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

JavaScriptでオリジナルalert2015/08/15

alertをスクリプトで実装




※Firefox以外での動作不明

alert.js 
$(function(){
  var alertDiv = $("<div>");
  alertDiv.css("display", "none");
  
  var black = $("<div>");
  black.css("position", "absolute");
  black.css("background-image", "url(clear_black.png)");
  black.css("width", "100%");
  black.css("height", $("body").height()+20);
  black.css("top", "0px");
  alertDiv.append(black);
  
  var alertWindow = $("<div>");
  alertWindow.css("position", "absolute")
  alertWindow.css("top","127px");
  alertWindow.css("left","570px");
  alertWindow.css("width","230px");
  alertWindow.css("height","142px");
  alertWindow.css("border", "1px solid #000");
  alertWindow.css("background", "#fff");
  alertDiv.append(alertWindow);
  
  var box1 = $("<div>");
  box1.html("オリジナルalertです");
  box1.css("color", "#000");
  box1.css("font-size", "12px");
  box1.css("margin", "38px 22px 36px");
  alertWindow.append(box1);
  
  var box2 = $("<div>");
  box2.css("background", "#eee");
  box2.css("border", "1px solid #ddd");
  box2.css("border-width","1px 0px 0px");
  var alertInput = $("<input>");
  alertInput.attr("type", "button");
  alertInput.attr("value", "OK");
  alertInput.css("color", "#555");
  alertInput.css("padding","3px 25px");
  alertInput.css("margin", "10px 138px");
  alertInput.click(function(){
    alertDiv.css("display", "none");
  });
  box2.append(alertInput);
  alertWindow.append(box2);
  
  $("body").append(alertDiv);
  
  $("#input1").click(function(){
    alert("通常のalertです");
  }).css("color", "#555");
  
  $("#input2").click(function(){
    alertDiv.css("display", "block");
    alertInput.focus();
  }).css("color", "#555");
});