Question

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

Answer 1

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

这不是一个纯粹的JS警报，而是一个弹出窗口。有了爱和CSS，你就能让它变得非常整洁。

＆＃13;

$('.openForm').click(function() {
    $('.popup').addClass('visible');
});
$('.closeForm').click(function() {
    $('.popup').removeClass('visible');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

编辑：这里有一个updated version，带有一个发送按钮和JS中的一点测试响应。通常，您可以使用表单标记操作属性或使用js进行AJAX调用。

Answer 2

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

在窗口提醒或类似的电子邮件表格？

2 个答案: