我想创建一个单击标签的弹出对话框。
<a href='mailto:[email protected]'> [email protected] </a>
单击此标记会显示弹出对话框以发送电子邮件。它应该有电子邮件地址字段，名称字段，消息字段等。
此网站使用SuiteCommerce构建。
一种方法是使用像jQuery这样的库来轻松显示通常隐藏的弹出div。
您的代码将如下所示，并假设您在页面上加载了jQuery库，以及提交表单的端点/destination。您还需要应用stying来使弹出窗口居中，否则看起来不错。
<html>
<body>
<a href='mailto:[email protected]' id="email_to_click"> [email protected] </a>
<div id="popup" style="display:none">
<form action="/destination">
Name: <input type="text" name="my_name"><br>
Email: <input type="text" name="email"><br>
Message <input type="text" name="message"><br>
<input type="submit" value="Submit">
</form>
</div>
<style>
#popup
{
position:absolute;
width:400px;
top: 50%;
left: 50%;
margin-left: -200px; // 1/2 width
margin-top: -200px; // 1/2 height }
</style>
<script>
$.ready(
$("#email_to_click").click(function(){
$("#popup").show();})
)
</script>
</body>
</html>
您需要设置多个组件
如果您想要一个示例，请查看address_details.tpl，它使用相同的方案打开地址的编辑模式。