这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"100%",scrolling:false});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
<a href="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" id="test">Please fill out my form.</a>
</body>
</html>
现在它工作正常,但我需要不使用iframe来获得更多功能。
有人能帮助我吗?
任何帮助都将不胜感激。
谢谢。
答案 0 :(得分:0)
使用Bootstrap CSS和JS样式框架。你可以从这里download。 Refer the files and folder structure
现在您可以复制bootstrap.css
和bootstrap-theme.css
,然后将其粘贴到您的项目中
现在这是您已审核的 demo.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<script src="JS/bootstrap.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap-theme.css" type="text/css" media="screen"/>
</head>
<body>
<h3>External Form</h3>
<a id="test" href="javascript:void(0);"
data-toggle="modal" data-target="#myWufooModal">
Please fill out my form.
</a>
<div class="modal fade" id="myWufooModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<a href="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" id="test">
</div>
</div>
</div>
</div>
</body>
</html>