窗口提醒或类似内容中的电子邮件表单

Email form in a window alert or similar?

本文关键字：电子邮件 表单 窗口      更新时间：2023-09-26

我想要实现的是创建一个在按下链接时打开的表单，人们可以在其中放置电子邮件，然后直接从该表单给我发电子邮件。我希望该表单显示在一个窗口中，比如说单击图标链接时打开一个窗口警报。我还想知道是否有方法可以使这个表单风格化。我不希望只使用CSS和HTML，我也可以使用Java Script。

试试这个：https://jsfiddle.net/3p8akoy8/

这不是一个纯粹的JS警报，而是一个弹出窗口。只要有一点爱心和CSS，你就能让它看起来非常整洁。

$('.openForm').click(function() {
    $('.popup').addClass('visible');
});
$('.closeForm').click(function() {
    $('.popup').removeClass('visible');
});
.openForm {
    color:blue;
    cursor:pointer;
}
.popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}
.visible {
    display:block;
}
.popup .form {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:300px;
    height:200px;
    background:white;
    border:solid 1px #ddd;
}
.popup .closeForm {
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    color:#ccc;
}
.popup .closeForm:hover {
    color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openForm">Click Me</div>
<div class="popup">
    <div class="form">
        <div class="closeForm">X</div>
        <input type="email" name="email" placeholder="Enter your E-Mail...">
    </div>
</div>

编辑：这是一个更新的版本，有一个发送按钮和一个JS测试响应。通常，您可以使用表单标记action属性，也可以使用带有js的AJAX调用。

您可以使用引导模式，并将表单放入其中。http://getbootstrap.com/javascript/#modals

相关文章：