Question

我想将php变量值发送到JavaScript弹出窗口。我的JavaScript弹出代码和PHP代码在同一页面中。在同一页面中，我想用PHP变量值调用JavaScript弹出窗口。

所以基本上我有2个按钮形式的2个不同的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"这样的事情，我的Popup就不会出现了。只有在href="#login"没有任何?id=123的情况下调用时，我的弹出窗口才会显示。

现在这里是我的基于Bootstrap的弹出代码：

<!-- 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 -->

请提出任何有效的解决方案。

Answer 1

据我所知，

你有一个用php创建的页面
在此页面上创建链接/按钮
创建页面时，php可以访问一系列ID
您希望使用完成页面上的链接/按钮存储这些ID，以便当用户单击链接/按钮时出现模式，并且使用单击按钮存储的ID将填充在内部显示的输入中模态
您希望所有链接/按钮只使用一个模式

如果这是正确的，我会使用链接/按钮的data attributes。有关详细信息，请参阅下面的评论：

Here is a working example

请注意，我必须从模态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＆lt; 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>

将PHP变量值发送到同一页面的JavaScript弹出窗口

1 个答案: