春季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和燈箱

回答

相關問題