Question

我想将一个变量值传递给我在同一页面上调用但尚未能够执行的模式框。

打开模式框的代码如下

<li style="font-style:bold" title="rate on skill" class="skill_rating">
<a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'>
<i class="fa fa-anchor" aria-hidden="true"></i>  </a><?php echo $skilltemp2[$q2] ?></li>

Modal Box代码如下

<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><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">Search</h4>    
            </div>
            <div class="modal-body">
                <div class="form-group">
                <input type="text" name="bookId" id="bookId" value=""/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"><span>Search</span></button>
            </div>
        </div>
    </div>

关闭正文标记之前的Javascript如下

<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myBookId = $(this).data('id');
 $(".modal-body #bookId").val( myBookId );
      });
 </script>

我在stackoverflow上看到了几个答案（例如：Passing data to a bootstrap modal），但我无法按照我的要求对其进行自定义。

请原谅我，如果它太简单了。我是菜鸟

Answer 1

这适用于我的情况。是的，它不是在PHP中，但我为Data-Id设置了静态值。

$('body').on('click', '.open-AddBookDialog', function() {
     var myBookId = $(this).data('id');
     $("#addBookDialog #bookId").val( myBookId );
});

示例JSFIDDLE

Answer 2

需要重新定义javascript变量和模式框的bookId值。可能的用例如下。

正文代码

<a href="#" data-toggle="modal" data-target="#takeaction" class="btn btn-default"></a>

模态框

<div class="modal fade" id="takeaction" 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">Display Apply Id in modal box in a dynamic way? </h4>    
    </div>
    <div class="form-inline container hidden-xs hidden-sm">
    <input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code"> 
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
    </div>
    </div>
    </div>
    </div>

Javascript代码

<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>

将变量的值传递给PHP中的模态框

2 个答案: