使用Java脚本将值传递到模式弹出菜单
Passing Values to Modal Popup Using Java Script
当用户单击特定按钮时,我想将按钮ID值传递到模式弹出窗口中。稍后,从传递的ID中,我可以查询DB值,并在打开的模式弹出窗口中查看。
这是按钮的代码部分。Id将从DB中分配。它运行良好。
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
模态窗口:在这里我需要从popwindow函数中获取值,并查询DB和视图:
<div id="openModal" class="modalDialog">
<div>
<a href="#" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
用于将值传递到模式弹出窗口的JavaScript函数
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
我需要一个popwindow函数的代码示例来将我的按钮ID值传递到Modal Window中。请帮我一下。我对这个话题很陌生。
我认为你应该使用AJAX来查询你的数据库并从中检索数据,popupwindow
的基本模板可以是这样的:
function popupwindow(id) {
$("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
$("#openModal").show();
})
}
以及您的HTML:
<div id="openModal" class="modalDialog">
<div>
<a href="#" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
<div class="content"></div>
</div>
</div>
不要使用onClick()
,而是使用jQuery click
函数。方法如下:
$("[input[name = 'button']").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
或者,我建议你在想要显示模式的按钮上添加一个类
<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>
现在,在JQuery中,执行以下
$(".modalBtn").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
希望它能回答你的问题。
使用window.location.hash替换哈希
function popupwindow(id) {
window.location.hash = '#openModal'
}
您可以使用以下脚本加载和卸载弹出框,
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$("#popupBoxClose").click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$("#popup_box").fadeOut("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.8"
});
}
function loadPopupBox() { // To Load the Popupbox
$("#popup_box").fadeIn("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.2"
});
}
});
</script>
除此之外,你不需要通过JS发送值,JS是客户端,你不能使用服务器端的语言,使用客户端。
一个解决方案是你可以使用类似的东西
window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"
并将表单的方法更改为GET而不是post。
完成后,您可以编写一个php代码,用于排除$_GET中的值,并使用php返回模式弹出窗口。
相关文章:
- jQuery菜单应保持操作模式
- 使用Java脚本将值传递到模式弹出菜单
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 将变量从URL传递到简单模式弹出菜单
- 如何在Chrome的自助服务终端模式下禁用右键单击/长按的上下文菜单
- 通过选择菜单即时更改代码镜像模式
- 手风琴下拉菜单中的引导模式弹出按钮
- 引导模式和菜单菜单冲突
- 如果用户在我的响应网站中的纵向模式下单击切换按钮,则导航菜单将在横向模式下消失
- 模式对话框中的Jquery UI选择菜单
- 当添加更多内容时,Ionic双侧菜单模式不会自动滚动
- 第四模式阻止导航栏下拉菜单正常工作
- 谷歌地图不会出现在模式弹出菜单中
- 带有引导程序弹出模式菜单的选项卡索引
- 引导程序:如何更改菜单项的颜色由于模式窗口关闭
- Jquery Cookie通过模式显示/隐藏菜单
- AngularJs:我想在点击按钮时销毁模式弹出菜单中的内容
- 我的Bootstrap模式锚不是从一个菜单(导航栏)的行项目内工作
- 从下拉菜单中选择一个列表项打开模式?我应该使用jquery/js吗?
- 使用棘轮框架(twitter引导程序)的模式菜单问题