如何传递一个变量来显示模态

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>

读取数据属性在modal

中使用

$(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);});

如果你想看一个工作的例子，请访问这个链接…谢谢大家