Javascript jquery将值从主窗口传递到弹出窗口_Javascript_Php_Jquery_Web

Javascript jquery将值从主窗口传递到弹出窗口

javascript php jquery web

Javascript jquery将值从主窗口传递到弹出窗口,javascript,php,jquery,web,Javascript,Php,Jquery,Web,我想将值从我的主窗口传递到我试图使用jquery的弹出窗口我已经在使用项目列表将它们显示为网格视图，我希望当用户单击详细信息按钮时显示其弹出窗口我希望将价格值传递给弹出窗口模态体中的任何部件 while ( $sql=mysqli_fetch_assoc($posts)){ echo' <div class="item col-xs-6 col-lg-4"> <div class="thumbnail" >

我想将值从我的主窗口传递到我试图使用jquery的弹出窗口我已经在使用项目列表将它们显示为网格视图，我希望当用户单击详细信息按钮时显示其弹出窗口我希望将价格值传递给弹出窗口模态体中的任何部件

  while ( $sql=mysqli_fetch_assoc($posts)){
        echo' <div class="item  col-xs-6 col-lg-4">
        <div class="thumbnail" >
            <img class="group lis t-group-image" style="height: 221px;
width: 353px; padding: 2px;
" src="../1'.$sql['img'].'" />
            <div class="caption" style="height: 105px;">
                <h4 class="group inner list-group-item-heading">
                    '.$sql['name'].'</h4>
                <p class="group inner list-group-item-text">
                    '.$sql['details'].' </p>
                <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <p id="price1" class="lead">سعر المنتج:'.$sql['price'].'</p></div>

                </div>
            </div>

           <button id="btn1">Show Text</button>
           <button data-toggle="modal" data-id="price1"  id="ww" class="btn btn-primary">details </button>
           <!--button data-toggle="modal" href="#shortModal"  id="ww" class="btn btn-primary">مشاهدة التفاصيل</button-->


            <!--button type="button" onclick="on_create_form_clicked();" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button -->
        </div>
    </div>';
    }
    ?>

while（$sql=mysqli\u fetch\u assoc（$posts））{
回声'
“.$sql['name']”

“.$sql['details']”

显示文本
细节
';
}
?>

这是弹出模式

<div id="shortModal" class="modal modal-wide fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->


×
情态标题
一个好身体
接近
保存更改

我想将该值传递到弹出窗口以显示详细信息，以便获得帮助？

您可以通过使用Jquery实现这一点
将Id添加到模式的标题或希望显示值的任何位置

<h4 class="modal-title" id ="ans">Modal title</h4>

您可以使用单击事件，通过使用

$（“#price1”）.text（）获取价格值

$（'#ww'）。单击（函数（）{
$（“#shortModal.modal body”）.text（$（“#price1”）.text（））
})

“.$sql['name']”

“.$sql['details']”
价格：2000美元
显示文本
细节
×
情态标题
一个好身体
接近
保存更改
根据我的理解，您可以在循环中添加模态，并设置动态模态
身份证
试试下面的代码
HTML/PHP
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php
$array=array();
$array[0]['name'] = 'Sony Pendrive';
$array[0]['details'] = '16 GB 2.0';
$array[0]['price'] = '120';
$array[1]['name'] = 'PNY Pendrive';
$array[1]['details'] = '32 GB 2.0';
$array[1]['price'] = '220';
foreach($array as $k=>$values){
?>
    <div class="thumbnail" >
        <div class="caption" style="height: 105px;">
            <h4 class="group inner list-group-item-heading">
                <?php echo $values['name']; ?>
            </h4>
            <p class="group inner list-group-item-text">
                <?php echo $values['details']; ?>
            </p>
            <div class="row">
                <div class="col-xs-12 col-md-12">
                <p id="price1" class="lead">prdoudct price : <?php echo $values['price']; ?></p></div>
            </div>
        </div>

       <button id="btn1">Show Text</button>
       <button data-toggle="modal" href="#shortModal_<?php echo $k; ?>"  id="ww" class="btn btn-primary">details </button>
    </div>

    <div id="shortModal_<?php echo $k; ?>" class="modal modal-wide fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Name : <?php echo $values['name']; ?> <br />
                        Details : <?php echo $values['details']; ?> <br />
                        Price : <?php echo $values['price']; ?> <br />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
<?php
}
?>




价格：
显示文本


详细信息：

价格：


接近
保存更改

在这段代码中，为开放特定模型创建数组并设置动态模型id
您的问题有点不清楚您想要解析哪些值，以及它应该放在哪里javascript在哪里？@CarstenLøvboAndersen我想将价格值传递到弹出窗口对于jquery模型弹出窗口，模态体中的任何软件都不需要传递任何参数。使用相同的php$sql['price']若要获取价格值，如果我只有一个缩略图类，则此选项有效，但如果我有5个以上的缩略图，该怎么办？Thumbnail5的值我将为所有ThumbnailNotWorkBro显示，因为我的web中有一个大于缩略图的值page@Onecode你在哪里说你在原来的帖子里有不止一个？添加更多的代码，这样我们就可以帮助你了，还有为什么你说答案不起作用时还要标记答案。您给可能有相同问题的其他人留下了错误的印象。您在32分钟前将其中一个答案标记为您问题的正确答案I correct two>
$("#ww").click(function () {
        $('#ans').val($(this).data('id'));
        $('#shortModal').modal('show');
    });

$('#ww').click(function() {
  $("#shortModal .modal-body").text($("#price1").text())
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php
$array=array();
$array[0]['name'] = 'Sony Pendrive';
$array[0]['details'] = '16 GB 2.0';
$array[0]['price'] = '120';
$array[1]['name'] = 'PNY Pendrive';
$array[1]['details'] = '32 GB 2.0';
$array[1]['price'] = '220';
foreach($array as $k=>$values){
?>
    <div class="thumbnail" >
        <div class="caption" style="height: 105px;">
            <h4 class="group inner list-group-item-heading">
                <?php echo $values['name']; ?>
            </h4>
            <p class="group inner list-group-item-text">
                <?php echo $values['details']; ?>
            </p>
            <div class="row">
                <div class="col-xs-12 col-md-12">
                <p id="price1" class="lead">prdoudct price : <?php echo $values['price']; ?></p></div>
            </div>
        </div>

       <button id="btn1">Show Text</button>
       <button data-toggle="modal" href="#shortModal_<?php echo $k; ?>"  id="ww" class="btn btn-primary">details </button>
    </div>

    <div id="shortModal_<?php echo $k; ?>" class="modal modal-wide fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Name : <?php echo $values['name']; ?> <br />
                        Details : <?php echo $values['details']; ?> <br />
                        Price : <?php echo $values['price']; ?> <br />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
<?php
}
?>