Question

我想创建一个单击标签的弹出对话框。

<a href='mailto:test@test.com'> test@test.com </a>

单击此标记会显示弹出对话框以发送电子邮件。它应该有电子邮件地址字段，名称字段，消息字段等。

此网站使用SuiteCommerce构建。

Answer 1

一种方法是使用像jQuery这样的库来轻松显示通常隐藏的弹出式div。

您的代码如下所示，并假设您在页面上加载了jQuery库，以及要将表单提交到的端点/destination。您还希望应用stying使弹出窗口居中，否则看起来不错。

<html>
<body>    
    <a href='mailto:test@test.com' id="email_to_click"> test@test.com </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>

Answer 2

您需要几个组件来进行设置

带有链接的按钮，将显示弹出窗口和data-toggle =“ display-in-modal”。链接应指向为实例视图定义的路由
将上述路线与要创建的视图链接的路由器
包含模板的视图，其中包含要创建的逻辑和字段。

如果要查看示例，请查看address_details.tpl，它使用相同的方案打开地址的编辑模式。

在SuiteCommerce中创建弹出窗口

2 个答案: