我正在尝试显示基于onClick事件的模态窗口
这就是我在做onClick的地方
block

这是模态窗口
<div class = "post-content">
<a onClick = "<%"show()"%>"> <h6><center> <%= imageData[0].title%></center> </h6> </a>
<img src = "<%= imageData[o].associated_images[0].url%>">
<center> <%= imageData[0].short_description%> </center>
</div>
&#13;
<% if(number){%>
<div class = "single-preview">
<h6><center> <%= imageData[0].title%></center> </h6>
<center><img src="<%=imageData[0].associated_images[0].url%>"style="width:720px height:405px;"> </center>
<center> <%= imageData[0].long_description%> </center>
<button class = "close-button"> × </button>
</div>
<%}%>
&#13;
基本上我在调用router.get(name, function(req, res) {
res.render('shows', {
number: false
});
});
时尝试更改变量number
的值。
我尝试了什么
一个。将show函数放在服务器端
湾将show功能放在客户端
C。我在这里看到的许多不同的使用方法
d。在客户端show()
没有什么对我有用。请有没有人有任何想法
答案 0 :(得分:2)
Write a show function in client side which calls an express route:
function show(){
$( "#yourmodal" ).load( "/showmodalroute" );
}
Call the function in onClick
:
<a onClick = "show()">
The express route:
router.get("/showmodalroute", function(req, res) {
res.render('shows', {
number: false
});
});
If you use JQuery things will be easier. (JQuery is a javascript library.)
In plain javascipt, you'll have to make a http
call:
function show()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('yourmodal').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/showmodalroute",true);
xmlhttp.send();
}
html:
<a onClick = "show()">