Question

我已经构建了一个表单，一旦用户输入并单击“提交”，它就会将收集的数据加载到模态上，并在屏幕上显示包含所有数据的模态。我试图弄清楚如何将模式的内容共享给社交媒体，而不是共享页面URL，如果有人可以指出正确的方向。预先谢谢你！

我尝试将社交媒体共享按钮添加到Modal的页脚中，但是它仍然需要一个URL来共享，而该模式没有该URL：

<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>The results are in!</h2>
<span class="close">&times;</span>
</div>
<div class="modal-body">
<div id="result"></div>
</div>
<div class="modal-footer"> 
<div class="social-links">
<a href="https://www.facebook.com/sharer/sharer.php?u="{PAGEURL}"&t= 
{PAGETITLE}" target="myModal" title="Share on Facebook"><i class="fab fa- 
 facebook"></i></a>
</div>

用户输入的表单：

<fieldset>            
<label>How old are you?</label>
<input type="number" id="myAge" value="" min="1" max="99">
<label >How many...</label> 
<select id="what" name='what' onchange="calculateTotal()">
<option value="Cans of Coke">Cans of Coke have I drank</option>
</select>
<label>How many per week?</label>
<input type="number" id="perWeek" value=""><br><br>
<input type='submit' id='submit' value='How Many!' onclick="myFunction(), 
buttonHide()"/></p>
</fieldset>

用于计算总计并将其推入模态的函数：

function myFunction（）{

var x = document.getElementById("myAge");   
var y = document.getElementById("perWeek");
var z = document.getElementById("what");
var perYear = y.value * 52;
var perLife = perYear * x.value - 10;
var defaultVal = z.defaultValue;
var currentVal = z.value;
var perLitre = perLife * 0.33;
var perSugarC = perLife * 0.039;

case z.value == "Cans of Coke":
    document.getElementById("result").innerHTML = "You have had 
        approximately: " + perLife + " " + currentVal +  "Equaling to "+ 
        perLitre.toFixed(2) + " Litres and " + perSugarC.toFixed(2) + " kg 
        of Sugar!";
    document.getElementById("myModal").style.display="block";

break;

模式：

<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>The results are in!</h2>
<span class="close">&times;</span>
</div>
<div class="modal-body">
<div id="result"></div>
</div>
<div class="modal-footer"> 
<div class="social-links">
<a href="https://www.facebook.com/sharer/sharer.php? 
u="{PAGEURL}"&t={PAGETITLE}" target="myModal" title="Share on 
Facebook"><i class="fab fa-facebook"></i></a>
</div>

模式脚本：

<script>
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
modal.style.display = "none", window.location.reload();
 }

window.onclick = function(event) {
   if (event.target == modal) {
    modal.style.display = "none", window.location.reload();
  }
}
</script>

我还尝试了使用Facebook开发者网站上的共享按钮：

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));</script>

然后像以前一样，但再次将按钮添加到模式页脚中，则需要一个模态没有的URL：

<div class="fb-share-button" 
data-href="https://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>

与社交媒体共享Modal的内容

0 个答案: