如何在不使用iframe的情况下创建灯箱弹出窗体

这是我的代码：

 <!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来获得一些进一步的功能。

有人能帮我吗？

如有任何帮助，我们将不胜感激。

谢谢。

使用Bootstrap CSS和JS样式框架。你可以从这里下载。请参阅文件和文件夹结构。

现在你可以复制bootstrap.css和bootstrap-theme.css，然后像一样粘贴到你的项目中

我的项目
- CSS
  - 引导.css
  - bootstrap-theme.css
- JS
  - bootstrap.js
- demo.html

现在这是您主持的演示。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>

相关内容

最新更新

热门标签：