模态框似乎不起作用
[英]Modal box doesn't seem to work
问题描述
Ok so I am trying to open abc.html file ( placed in same directory ) in modal box. 
好的，所以我尝试在模式框中打开abc.html文件（位于同一目录中）。
This is the code but it doesn't seem to work. 这是代码，但似乎不起作用。 Please help 请帮忙
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("a#someId").on("click", function(){
$.post("abc.html", function(data){
$("#myModalDiv").html(data).fadeIn();
});
});
});
</script>
</head>
<body>
<a id="someId" href="">This is a link to abc.html</a>
<div id="myModalDiv">
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2014-03-03 15:41:34
Try to use e.preventDefault() here to prevent default action of your anchor: 尝试在此处使用e.preventDefault（）来防止锚的默认操作：
$(document).ready(function () {
$("#someId").on("click", function (e) {
e.preventDefault();
$.post("abc.html", function (data) {
$("#myModalDiv").html(data).fadeIn();
});
});
});
Also, because id is unique, you just need to use #someId instead of a#someId . 另外，由于id是唯一的，因此您只需要使用#someId而不是a#someId 。
解决方案2
1 2014-03-03 16:01:29
Here is a fiddle of your working code. 这是您工作代码的小提琴 。
$(document).ready(function(e){
$("a#someId").on("click", function(e) {
e.preventDefault();
$.ajax({
url: '/echo/html/',
type: 'post',
data: {
html: "<p>Hey</p>"
},
success: function(data){
$("#myModalDiv").html(data).fadeIn();
}
});
});
});
As far as I can tell, you've got it mostly right. 据我所知，您基本上是正确的。 As you can see, clicking on the link fires an ajax request, which populates your div. 如您所见，单击链接会触发ajax请求，该请求会填充div。 The same code is given above in Felix' answer, but you said this doesn't work for you. 上面的Felix答案中给出了相同的代码，但是您说这对您不起作用。 This leads me to wonder exactly what "doesn't work". 这使我想知道到底什么“不起作用”。
Does the response (data) appear in the div? 响应（数据）是否出现在div中？ If so, are you concerned about the "fadeIn" effect? 如果是这样，您是否担心“淡入”效果？ Or the modal box? 还是模态框？
z. ž。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.