时间戳

首页 > 解决方案 > 如何为我的按钮创建模态效果？

javascript - 如何为我的按钮创建模态效果？

问题描述

我正在尝试为具有“发送”按钮的表单创建模态效果。我想要它，所以当用户按下按钮时，他们会收到一个弹出效果，说明他们的消息已提交。如何使用表单和输入标签来做到这一点？谢谢。下面是我正在使用的代码。

.container {
        height: auto;
        width: 40%;
        font-family: 'Hind';
        margin: 0 auto;
        margin-top: 40px;
        display: block;
        background: lightblue;
        padding: 20px;
        border-radius: 15px;
        position: absolute;
        left: 20px;
    }
    .container2 {
        height: auto;
        width: 40%;
        font-family: 'Hind';
        margin: 0 auto;
        margin-top: 40px;
        display: block;
        background: lightblue;
        padding: 20px;
        border-radius: 15px;
        position: absolute;
        right: 20px;
        bottom: -220px;
    }
    form {
        font-family: 'Hind';
        padding: 0;
        width: 90%;
        border-radius: 15px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .feedback-input {
        color: #000;
        font-family: 'Hind';
        font-weight: 400;
        font-size: 18px;
        border-radius: 0;
        margin-right: 0;
        line-height: 22px;
        background-color: none;
        padding: 13px 13px 13px 13px;
        margin-bottom: 10px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 2px solid #22A7F0;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .feedback-input:focus {
        box-shadow: 0;
        color: #3498db;
        transition: .4s ease;
        outline: none;
        border-bottom: 2px solid black;
        padding: 13px 13px 13px 13px;
    }
    .focused {
        color: #30aed6;
        border: #30aed6 solid 3px;
    }
    textarea {
        width: 100%;
        height: 150px;
        line-height: 150%;
        resize: vertical;
    }
    #button-blue {
        font-family: 'Hind';
        width: 100%;
        border: none;
        cursor: pointer;
        background-color: #22A7F0;
        color: white;
        font-size: 24px;
        padding-top: 22px;
        padding-bottom: 22px;
        margin-top: -4px;
        font-weight: 700;
        transition: .3s ease;
    }
    #button-blue:hover {
        background-color: rgba(0, 0, 0, 0);
        color: black;
        background: #22A7F0;
    }
    .submit:hover {
        color: #22A7F0;
    }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
            <h1>Contact Form</h1>
            <h2>Reach out to us for any inquiry.</h2>
            <form>
                <p class="name"><input class="feedback-input" id="name" name="name" placeholder="Name" type="text"></p>
                <p class="email"><input class="feedback-input" id="email" name="email" placeholder="Email" type="text"></p>
                <p class="text">
                <textarea class="feedback-input" id="comment" name="text" placeholder="Message"></textarea></p>
                <div class="submit">
                    <input id="button-blue" type="submit" value="SEND!">
                </div>
            </form>
        </div>
    <script src="script.js"></script>
  </body>
</html>

标签： javascripthtmlcss

解决方案

这是一个使用 BootStrap 和 Jquery 的工作示例。更多示例：https ://getbootstrap.com/docs/4.0/components/modal/

   <html>
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Send message
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Your message has been transmitted.
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    
  </div>
</div>
  </div>
</div>

</body>
</html>

推荐阅读