0

我想使用灯箱来显示我的表格，我使用了 Fancybox，但没有成功。我想要一些关于用于实现此目的的最佳灯箱插件的建议，以及我需要如何设置它，因为我的表单请求将首先通过控制器。

更新：

这种形式在没有灯箱的情况下可以正常工作。当我单击链接时，控制器正在工作，它只是将我带到页面并且不会在灯箱中显示表单。

代码：

<%@ 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>

运行时编辑的 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>
4

1 回答 1

1

Do you have the view/controller portion working without the lightbox? If not, get that working first. Then use the url that you'd use to call the form for displaying in the lightbox. I bet lightbox gives you an option of specifying a url for display. Also, is there an basic example of round trip interaction with php backend? Use that to extrapolated implementation in you spring app. I'd suggest get some code going and come back for more when you get stuck.

EDIT: It does seem to support external urls, see #4 here It will take 'href' as a parameter.

EDIT 2:

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

    return false;
});

... not sure though if it needs an absolute url.

EDIT 3:

Per their examples the href that you try to call fancybox on, needs to tell it that outside content needs to be displayed in an iframe: class="fancybox fancybox.iframe" in your case.

于 2012-10-22T12:56:06.450 回答