将远程页面打开为引导模式
Open remote page into bootstrap modal
这里似乎有重复的问题。我想打开一个内容到一个模态从远程页面,这是由MySql数据库填充。我还希望该模式与我的自定义样式等打开。我已经走了这么远,但在那之后我就陷入了困境。下面是到目前为止的代码
页面上的输出:
$output .='<h4><a class="md-trigger" data-OfferID="' . $offer_id . '" href="#" data-modal="offer_modal">' . $title . '</a></h4><hr>';
加载数据的模式,点击输出(位于footer.php中):
<div id="offer_modal" class="md-modal md-effect-flip" aria-hidden="true">
<div class="md-content">
</div>
</div>
位于$output回显页面中的脚本:
$('.md-trigger').click(function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").html(result);
}});
});
和仅作为引用的远程页面,该页面基于id加载数据,然后填充modal:
<?php
extract($_GET);
?>
<?php
require('inc/connect/config.php');
$offer = (int) $_GET['OfferID']; ?>
<?php
try {
$code_sql = 'SELECT * FROM codes WHERE id LIKE :code_id';
$query = $db->prepare($code_sql);
$code_params = array(':code_id' => $offer);
$query->execute($code_params);
$code_r = $query->fetch(PDO::FETCH_ASSOC);
$c_title = $code_r['title'];
$c_desc = $code_r['description'];
$c_redeem = $code_r['redemption'];
$c_textcode = $code_r['textcode'];
$c_exp = $code_r['expiry'];
$c_terms = $code_r['terms'];
$c_url = $code_r['url'];
} catch (PDOException $e) {
echo "failed to load offer";
exit;
}
?>
<button type="button" class="close close-md" data-dismiss="modal" aria-label="Close"><h3><span aria-hidden="true">×</span></h3></button>
<h5><?php echo $c_title; ?></h5>
<p><?php echo $c_desc; ?></p>
<h3><?php echo $c_textcode; ?></h3>
<p><?php echo $c_redeem; ?></p>
<p class="small-text"><?php echo $c_terms; ?></p>
目前,我得到的问题是模态只加载一次,当列表中的顶部项目被点击时,它不会加载当点击列表中的任何其他项目…我做错了什么!!我对这一切都很陌生,所以请原谅我:)
thanks in advance
Kaylee
用这个例子测试。
$('.md-trigger').on('click',function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").empty().append(result);
}});
});
相关文章:
- 想要打开从链接到另一个页面的模式弹出窗口
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 查看完某个页面后,在重定向的页面上弹出js模式
- 如何仅在横向模式下显示页面
- 从内部链接进入页面时,引导模式未打开
- Javascript:为页面上的所有图像制作模式弹出窗口
- 为移动设备调整页面大小时,引导模式会向下移动页面
- 将页面片段加载到Twitter引导模式中
- d3转换从页面加载开始,而不是从模式弹出加载开始
- 如何在同一页面上的多个按钮上打开一个引导模式
- 在页面加载时删除CSS模式Flash
- Bootsrap模式在页面加载时触发,每个用户一次
- 引导模式导致页面向右移动
- 文件选择器-模式在页面加载时打开
- jQuery dataTable为特定的引导模式设置页面限制
- Chrome用户脚本工作在一个线程页面,但不是在一个主要的论坛页面,具有相同的结构
- Twitter bootstrap 3模式打开页面加载没有效果
- 在angular ui引导程序中关闭、打开特定模式的页面加载
- 从引导模式获取页面中选定的项目
- 在页面上以模式打开页面网址(Facebook 照片网址)