More than 5 years have passed since last update.

jQueryを使った新規作成モーダル

Last updated at 2019-07-11Posted at 2019-07-11

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
 

  <!-- モーダル部分 -->
  <div id="signup-modal" class="signup-modal-wrapper" >
    <div class="modal">
      <div>
        <i id="close-modal" class="fa fa-2x fa-times" ></i>
      </div>
      <div id="signup-form">
        <h2>Emailで新規登録</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">新規登録</div>
        </form>
      </div>
    </div>
  </div>
  <!-- モーダルここまで -->


      <!-- 新規登録ボタン -->
      <div class="btn signup signup-show">新規登録はこちら</div>
      
    
   
 
  
      <!-- 新規登録ボタン -->
      <span class="btn message signup-show">さっそく開発する</span>
    
  
  <script src="script.js"></script>
</body>
</html>

style.css

/*モーダル*/
.signup-modal-wrapper {
  position: fixed; /*画面転換*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display:none;
}

.modal {
  position: absolute;/*画面を中央に寄せる*/
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
  
}

main.js

$(function(){
$('#close-modal').click(function(){
    $('#signup-modal').fadeOut();
  });
  
  $('.signup-show').click(function(){
    $('#signup-modal').fadeIn();
  });
  
  
  });

カスタマイズ用

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up