Question

你好我在wordpress上开发我自己的功能插件，我一直试图将一个变量从一个页面传递给一个模态，该模态在单击链接后打开，显示一个删除确认对话框

打开模态的链接是

<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
    <i class="fi-trash size-24 icolored"></i>
</a>

模态窗口代码

<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?>  </h2>
    <p class="lead">This cannot be undone</p>
    <a class="deleteButton button" href="#">delete</a>
    <a class="close-reveal-modal">&#215;</a>
</div>

如何将$passing_var从主页传递到模态窗口？

Answer 1

设置数据属性

<a data-id="<?php echo $passing_var?>" class="deleteLink">
    <i class="fi-trash size-24 icolored"></i>
</a>

读取要在模态中使用的数据属性

$(document).on("click", ".deleteLink", function () {
     var dataId = $(this).data('id');
     $('#deleteModal').modal('show');
});

Answer 2

经过大量的试验和错误以及谷歌研究后，最终得到了它......在这里没有任何意外...... :(

因此，如果将来有人需要将变量从页面传递到模态，则必须遵循以下三个步骤...

1.创建模态按钮

<button data-reveal-id="myModal" data-my-number="1">First One</button>

2.添加模态对话框

<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>.  It is mine.</p><a class="close-reveal-modal">&#215;</a></div>

3.添加Javascript

$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});

如果您想查看一个有效的示例，请访问此link ...谢谢大家

如何传递变量以显示模态

2 个答案: