春季MVC和灯箱

我想用灯箱来显示我的表格，我用Fancybox并没有成功。我希望获得关于最佳灯箱插件用于实现此目的的一些建议，以及如何设置此项，因为我的表单请求将首先通过控制器。春季MVC和灯箱

更新时间：

这种形式做工精细没有灯箱。控制器正在工作，当我点击链接，它只需要我到页面，并不显示在lightbox中的窗体。

代码：

<%@ include file="/WEB-INF/jsp/include.jsp" %> 
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 


    <script type="text/javascript"> 
      <%@ include file="../js/lightbox/jquery.fancybox.pack.js"%> 

    </script> 


    <style> 
      <%@ include file="../js/lightbox/jquery.fancybox.css" %> 

    </style>  

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $(".fancybox").fancybox(); 
     }); 
    </script> 


    <title><fmt:message key="title"/></title> 



    </head> 
    <body> 
    <h1><fmt:message key="heading"/></h1> 
    <p><fmt:message key="greeting"/></p> 


    <a href="<c:url value="login.htm"/>">Login</a></br> 



    <a href="<c:url value="officer_registration.htm"/>">Register</a></br> 


    <a class="fancybox" href="officer_registration.htm">Light Box Registration</a></br> 
    <a class="fancybox" href="http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg" >dog</a> 


    </body> 
</html>

更新的代码

<%@ include file="/WEB-INF/jsp/include.jsp" %> 
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 



    <script type="text/javascript"> 
      <%@ include file="../js/lightbox/jquery.fancybox.pack.js"%> 

    </script> 


    <style> 
      <%@ include file="../js/lightbox/jquery.fancybox.css" %> 

    </style>  

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('#regForm').click(function() { 
       $.fancybox({ 
         'href' : '/officer_registration.htm' 
        }); 

       return false; 
      }); 

      $('#pic').click(function() { 
       $.fancybox({ 
         'href' : 'http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg' 
        }); 

       return false; 
      }); 

     }); 
    </script> 


    <title><fmt:message key="title"/></title> 



    </head> 
    <body> 
    <h1><fmt:message key="heading"/></h1> 
    <p><fmt:message key="greeting"/></p> 


    <!-- <a href="<c:url value="login.htm"/>">Login</a></br> --> 
    <!-- <a href="<c:url value="officer_registration.htm"/>">Register</a></br> --> 

    <!-- <a class="fancybox" href="login.htm">Light Box login</a></br> --> 

    <a id="regForm" class="fancybox" href="officer_registration.htm">Light Box Registration</a></br> 

    <!-- <a id ="pic" class="fancybox" href="http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg" >dog</a> This picture works presently--> 


    </body> 
</html>

EDITED HTML在运行时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

    <!-- <script src="http://code.jquery.com/jquery-1.8.2.js"></script> --> 



    <script type="text/javascript"> 
      /*! fancyBox v2.1.2 fancyapps.com | fancyapps.com/fancybox/#license */ 


.......... 


    </script> 


    <style> 
      /*! fancyBox v2.1.2 fancyapps.com | fancyapps.com/fancybox/#license */ 
.fancybox-wrap, 
.fancybox-skin, 
.fancybox-outer, 
.fancybox-inner, 
.fancybox-image, 
.fancybox-wrap iframe, 
.fancybox-wrap object, 
.fancybox-nav, 
.fancybox-nav span, 
.fancybox-tmp 
{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
    outline: none; 
    vertical-align: top; 
} 

.fancybox-wrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 8020; 
} 

.fancybox-skin { 
    position: relative; 
    background: #f9f9f9; 
    color: #444; 
    text-shadow: none; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

.fancybox-opened { 
    z-index: 8030; 
} 

.fancybox-opened .fancybox-skin { 
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
} 

.fancybox-outer, .fancybox-inner { 
    position: relative; 
} 

.fancybox-inner { 
    overflow: hidden; 
} 

.fancybox-type-iframe .fancybox-inner { 
    -webkit-overflow-scrolling: touch; 
} 

.fancybox-error { 
    color: #444; 
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin: 0; 
    padding: 15px; 
    white-space: nowrap; 
} 

.fancybox-image, .fancybox-iframe { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.fancybox-image { 
    max-width: 100%; 
    max-height: 100%; 
} 

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url('fancybox_sprite.png'); 
} 

#fancybox-loading { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -22px; 
    margin-left: -22px; 
    background-position: 0 -108px; 
    opacity: 0.8; 
    cursor: pointer; 
    z-index: 8060; 
} 

#fancybox-loading div { 
    width: 44px; 
    height: 44px; 
    background: url('fancybox_loading.gif') center center no-repeat; 
} 

.fancybox-close { 
    position: absolute; 
    top: -18px; 
    right: -18px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    z-index: 8040; 
} 

.fancybox-nav { 
    position: absolute; 
    top: 0; 
    width: 40%; 
    height: 100%; 
    cursor: pointer; 
    text-decoration: none; 
    background: transparent url('blank.gif'); /* helps IE */ 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    z-index: 8040; 
} 

.fancybox-prev { 
    left: 0; 
} 

.fancybox-next { 
    right: 0; 
} 

.fancybox-nav span { 
    position: absolute; 
    top: 50%; 
    width: 36px; 
    height: 34px; 
    margin-top: -18px; 
    cursor: pointer; 
    z-index: 8040; 
    visibility: hidden; 
} 

.fancybox-prev span { 
    left: 10px; 
    background-position: 0 -36px; 
} 

.fancybox-next span { 
    right: 10px; 
    background-position: 0 -72px; 
} 

.fancybox-nav:hover span { 
    visibility: visible; 
} 

.fancybox-tmp { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    visibility: hidden; 
} 

/* Overlay helper */ 

.fancybox-lock { 
    overflow: hidden; 
} 

.fancybox-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    display: none; 
    z-index: 8010; 
    background: url('fancybox_overlay.png'); 
} 

.fancybox-overlay-fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
} 

/* Title helper */ 

.fancybox-title { 
    visibility: hidden; 
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    position: relative; 
    text-shadow: none; 
    z-index: 8050; 
} 

.fancybox-opened .fancybox-title { 
    visibility: visible; 
} 

.fancybox-title-float-wrap { 
    position: absolute; 
    bottom: 0; 
    right: 50%; 
    margin-bottom: -35px; 
    z-index: 8050; 
    text-align: center; 
} 

.fancybox-title-float-wrap .child { 
    display: inline-block; 
    margin-right: -100%; 
    padding: 2px 20px; 
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-border-radius: 15px; 
     -moz-border-radius: 15px; 
      border-radius: 15px; 
    text-shadow: 0 1px 2px #222; 
    color: #FFF; 
    font-weight: bold; 
    line-height: 24px; 
    white-space: nowrap; 
} 

.fancybox-title-outside-wrap { 
    position: relative; 
    margin-top: 10px; 
    color: #fff; 
} 

.fancybox-title-inside-wrap { 
    padding-top: 10px; 
} 

.fancybox-title-over-wrap { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    color: #fff; 
    padding: 10px; 
    background: #000; 
    background: rgba(0, 0, 0, .8); 
} 

    </style>  

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('#regForm').click(function() { 
       $.fancybox({ 
         'href' : '/officer_registration.htm' 
        }); 

       return false; 
      }); 

      $('#pic').click(function() { 
       $.fancybox({ 
         'href' : 'http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg' 
        }); 

       return false; 
      }); 

     }); 
    </script> 


    <title>Crime Track Application</title> 



    </head> 
    <body> 
    <h1>Hello :: Spring Application Test</h1> 
    <p>Greetings Darindra Ramdhanie 4</p> 


    <!-- <a href="login.htm">Login</a></br> -->  
    <!-- <a href="officer_registration.htm">Register</a></br> --> 

    <!-- <a class="fancybox" href="login.htm">Light Box login</a></br> --> 

    <a id="regForm" class="fancybox" href="officer_registration.htm">Light Box Registration</a></br> 

    <!-- <a id ="pic" class="fancybox" href="http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg" >dog</a> This picture works presently--> 


    </body> 
</html>

来源

2012-10-22 devdar

你视图/控制器部分在没有lightbox的情况下工作？如果没有，首先要做好工作。然后使用你用来调用窗体的url来显示在Lightbox中。我打赌lightbox给你一个指定显示网址的选项。另外，是否有一个与php后端往返交互的基本示例？使用它来推断你在Spring应用程序中的实现。我建议你去做一些代码，并在遇到困难时再回来。

编辑： 它似乎支持外部URL，见＃4 here 它将采取“HREF”作为参数。

编辑2：

$('.fancybox').click(function() { 
    $.fancybox({ 
      'href' : 'officer_registration.htm' 
     }); 

    return false; 
});

...不知道，如果它需要一个绝对URL虽然。

编辑3：

每their examples您尝试的fancybox上调用HREF，需要告诉它之外的内容需要显示在iframe：类=“的fancybox fancybox.iframe”你的情况。

来源

2012-10-22 12:56:06 vector

我的进度已经更新。窗体的作品，但不出现在灯箱。是的，我有视图/控制器部分工作，而不用lightbox – devdar

什么浏览器正在测试这与？任何错误，服务器或客户端？ – vector

我使用Firefox和我用萤火虫，我没有看到任何错误。当我点击链接，它带我到页面，但不是在lightbox – devdar

春季MVC和灯箱

回答

相关问题