我想将php变量值发送到JavaScript弹出窗口。我的JavaScript弹出代码和PHP代码在同一个页面中。在同一个页面中，我想用PHP变量值调用JavaScriptpopup。
所以基本上我有两个不同的PHP变量值，以两个按钮的形式，用户可以点击任何按钮，我只想根据PHP变量值显示一个弹出窗口。
以下是我在代码中所做的：
<!-- Calling same Popup window with diff ID -->
<a href="#login?h_id=123" data-toggle="modal" class="btn btn-large">Hire Person</a>
<!-- Calling same Popup window with diff ID -->
<a href="#login_hire?f_id=456" data-toggle="modal" class="btn btn-large">Hire <?php echo $array_other_new[1] ?></a>
但是，如果我像上面所示的href="#login?h_id=123"那样做，我的弹出菜单就不会出现。只有当调用类似href="#login"而没有任何?id=123时，My Popup才会出现。
现在这是我的基于引导程序的弹出代码：
<!-- LogIn for Hiring Popup Starts -->
<div class="modal large hide fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="login">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>LogIn</h3>
</div>
<div class="modal-body">
<form method="post" onSubmit="javascript:void(0)">
<span id="status"></span>
<input type="hidden" id="get_follow_id" value="">
<input type="hidden" id="get_hire_id" value="<?php echo $get_id ?>">
<div class="controls controls-row">
<label class="title">Email *</label>
<input class="span3" type="text" placeholder="Email" id="email" />
</div>
<div class="controls controls-row">
<label class="title">Password *</label>
<input class="span3" type="password" id="pass" placeholder="Password" />
</div>
<div class="controls controls-row">
<input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
<br><br>
<a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
<!-- LogIn for Hiring Popup Ends -->请提出任何可行的解决方案。
据我所知，
- 您有一个使用php创建的页面
- 在该页面上创建了链接/按钮
- 创建页面时，php可以访问一组id
- 您希望将这些id与链接/按钮一起存储在完成的页面上，这样，当用户单击链接/按钮时，会出现一个模态，并且与单击的按钮一起存储的id会填充在模态内显示的输入中
- 您希望所有链接/按钮都只使用一个模态
如果这是正确的，我会使用链接/按钮的数据属性。有关详细信息，请参阅下面的评论：
以下是的工作示例
注意，我不得不从您的模态div中删除hide类，使其与<div class="modal large fade"....类似，因为否则模态将不会出现
以下是实现此功能所需的快速内容请参阅下面的完整代码
jQuery
$('body').on("click",".callModal", function() {
var f_id = $(this).data('f-id');
$('#get_hire_id').val( f_id );
});
*请注意，访问data('f-id')的语法可能会因您使用的jQuery版本和/或需要支持的浏览器而异，我相信IE<11在这里有问题。。。。但它不在哪里…
php
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
?>
我的示例中使用的所有代码：
<?php
// I dont know exactly how you create your page
// so i'm just gonna show you a simple example and wing it
$array_other_new=array("John Smith","James Jones", "William Baker", "Michael Frost", "Montey Python");
$array_other_new_hire_ids=array("123","456", "789", "012", "345");
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function() {
// listen for clicks on our links
$('body').on("click",".callModal", function() {
// when a user clicks a button
// get the id we stored in the button's
// data attribute
var f_id = $(this).data('f-id');
// note our attribute is `data-f-id` in the html
// but we access it by `.data('f-id')` here
// always leave the `data-` off
// set the value to our input
$('#get_hire_id').val( f_id );
// the normal link functionallity
// will open the modal as normal
});
});
</script>
</head>
<body>
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
}
// the important part here is data-f-id="'.$array_other_new_hire_ids[$i].'"
// this is where we store our php variable in the link's data-f-id property which we have just made up, cool huh?
// also note that we added the class `callModal` to the element so we can easily bind a function to them later
?>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
<div class="modal large fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>LogIn</h3>
</div>
<div class="modal-body">
<form method="post" onSubmit="javascript:void(0)">
<span id="status"></span>
<input type="text" id="get_follow_id" value="">
<input type="text" id="get_hire_id" value="">
unhid to show setting value<br>
<div class="controls controls-row">
<label class="title">Email *</label>
<input class="span3" type="text" placeholder="Email" id="email" />
</div>
<div class="controls controls-row">
<label class="title">Password *</label>
<input class="span3" type="password" id="pass" placeholder="Password" />
</div>
<div class="controls controls-row">
<input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
<br>
<br>
<a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
</body></html>