2014-01-28 83 views
0

我实现了一个酒店预订表格的脚本,如果他们选择入住和退房日期,它将在fancybox iframe中打开。fancybox iframe不会打开

但现在我想链接一些其他的文本/按钮链接,也打开fancybox iframe,但与oder url。我只是不知道作为我的主播中的一个班级要放什么。

预订表格应该可以正常工作,而且自定义链接应该打开一个fancybox iframe,如果我为他们设置了特定的类。

感谢您的帮助!

头代码:

<link type="text/css" href="http://loodsmans-texel.nl/other/bookingmodule/jquery-ui-1.8.16.custom.css" rel="Stylesheet" /> 
<link type="text/css" href="http://loodsmans-texel.nl/other/bookingmodule/jquery.fancybox-1.3.4.css" rel="Stylesheet" /> 
<!-- Optioneel --> 
<link type="text/css" href="http://loodsmans-texel.nl/other/bookingmodule/defaultView.css" rel="Stylesheet" /> 
<!-- Indien u nog geen jQuery gebruikt op uw website dient u deze ook in te laden --> 
<script type="text/javascript" src="https://static.cubilis.eu/jquery/jquery-1.6.4.min.js"></script> 
<script type="text/javascript" src="https://static.cubilis.eu/jquery/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="https://static.cubilis.eu/jquery/date.js"></script> 
<!-- Indien u nog geen Fancybox gebruikt op uw website dient u deze ook in te laden --> 
<script type="text/javascript" src="https://static.cubilis.eu/fancybox/jquery.fancybox-1.3.4.js"></script> 

<script type="text/javascript"> 
    var _LOGISID = 3938; 
    // Wijzig in uw gewenste taal (en, fr, nl, de, es, it) 
    var _TAAL = 'nl'; 

    $(document).ready(function() { 
      $("#startdate").datepicker({ 
       dateFormat: "dd-mm-yy", 
      }); 
      $("#enddate").datepicker({ 
       dateFormat: "dd-mm-yy", 
      }); 
      var today = new Date(); 
      $("#startdate").datepicker("setDate", new Date()); 
      var tomorrow = today.add(3).days(); 
      $("#enddate").datepicker("setDate", tomorrow); 

      $("#startdate").change(function() { 
       var d = Date.parseExact($(this).val(), "dd-MM-yyyy"); 
       d = d.add(3).days(); 
       $("#enddate").datepicker("option", "minDate", d); 
      }); 
     }); 

    function submitmyform(form) { 
     var href = form.action + "?logisid=" + _LOGISID 
      + "&taal=" + _TAAL + "&startdatum=" + $("#startdate").val() + "&einddatum=" + $("#enddate").val(); 
     jQuery.fancybox({ href: href ,type: 'iframe', width: 500, height: 550, overlayColor: '#000', hideOnContentClick: false, hideOnOverlayClick: false }); 
     return false; 
    } 
</script> 

身体剪断预订表格中打开一个的fancybox的iframe:

<form method="get" action="https://booking.cubilis.eu/check_availability.aspx" onsubmit="return submitmyform(this);"> 
<table id="CheckAvailabilityContainer" cellspacing="0" cellpadding="0"> 
    <tbody id="bookmodule"> 
     <tr> 
     <td><input type="text" name="startdate" id="startdate" ></td> 
     <td><input type="text" name="enddate" id="enddate" ></td> 
     <td><input type="submit" class="btnCheckAvail" value="Book now" id="btnSubmit"></td> 
     </tr> 
    </tbody> 
</table> 

而且应该打开一个的fancybox iframe中的URL,这不行的文本链接:

<a href="https://booking.cubilis.eu/packages_select_dates.aspx?logisid=3938&amp;booktemplate=1&amp;taal=nl&amp;id=5920" title="Arrangement Fiets" class="jQuery fancybox.iframe">aangeboden</a> 

作为班级我需要什么?

谢谢!

+1

你试过看看什么浏览器控制台报告给你,因为在错误等 –

+0

问题是,fancybox代码没有被调用:那就是函数submitmyform()没有被调用,据我所知,所以不是启动fancybox代码? –

回答

0

让你有你的链接提到:

<a href="https://booking.cubilis.eu/packages_select_dates.aspx?logisid=3938&amp;booktemplate=1&amp;taal=nl&amp;id=5920" title="Arrangement Fiets" onclick="Clickme(); return false;" class="jQuery fancybox.iframe">aangeboden</a> 

然后我添加了一个被点击时调用的函数:

function Clickme(){ 
       jQuery.fancybox({href:'PLACE THE URL YOU REQUIRE HERE', type: 'iframe', width: 500, height: 550, overlayColor: '#000', hideOnContentClick: false, hideOnOverlayClick: false }); 
} 

所以会发生什么是的onclick它应该调用该功能(Clickme)然后初始化fancybox

+0

我应该在哪里添加头部功能?为什么我们需要将网址打开并在?你可以在这里或http://jsfiddle.net/上给我整个头码吗?谢谢!对不起,问这么多! – Crossflipje

+0

链接将会去你想要的地方,并且Clickme()函数可以在submitmyform(form)函数之前或之后执行。你可以remoeve href:'??'因为它应该采取链接url –

+0

哦!我想我明白了!谢谢! – Crossflipje