通过电子邮件共享模态窗口

Posted 2021-04-16

我想通过电子邮件分享一个模态窗口。

我想要完成的是，点击“共享”按钮后，用户可以发送一封包含该模态链接的电子邮件，当您点击该链接时，网站加载该模态已经打开。

我在这里创建了一个小提琴http://jsfiddle.net/pcx98bvs/：

<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
   </div>
   <div class="modal-body">
    ...
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <a href="mailto:[e-mail]"><button type="button" class="btn btn-primary">Share</button></a>
  </div>
 </div>
 </div>
 </div>

有小费吗？

非常感谢Alex

答案

您可以将body查询字符串参数添加到链接到模态的href 示例：<a href="mailto:[e-mail]?body=https://yourwebsite#modal"> 然后将此脚本放在页面上，以便您可以通过使用来自url的传递哈希来触发模式

$(document).ready(function () {
    var target = document.location.hash;
    $(target).modal('show');
});