jQueryで簡単なモーダルウィンドウを実装 #CSS

css

style.css

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background-color: #fff;
    border-radius: 20px;
}
.modal-text {
    display: table-cell;
    width: 300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
}
.modal-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    padding-bottom: 4px;
    background-color: #fff;
    border: 2px #777 solid;
    border-radius: 15px;
    color: #777;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.modal-show {
    margin: 50px;
}

htmlとjQuery

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <p class="modal-show">CLICK!!</p>
    <div class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-text">MODAL WINDOW</div>
            <button type="button" class="modal-close">x</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// .modal-show をクリックすることで .modal をfadeInする。
// .modal-close をクリックで .modalがfadeOutする。
$(function(){
  $(".modal-show").click(function(){
    $(".modal").fadeTo(500,0.7);//第一引数に秒数、第二引数にopacityを設定し、その秒数をかけて設定したopacityに変化する。
  });
  $(".modal-close").click(function(){
    $(".modal").fadeOut(500);//一定時間かけてフェードアウトする。
  });
});
</script>
</body>
</html>