Question

我使用form和jquery创建了一个自动完成下拉搜索框。当用户选择某个选项并单击“提交”按钮时，会将其定向到链接的网页。

用户点击提交按钮后，我想使用灯箱样式的弹出窗口或对话框显示链接的html网页。

我是否知道如何通过点击下拉菜单中的提交按钮来触发灯箱（厚箱）弹出结果？

这是我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Javascript image dropdown - basic</title>
    <link rel="stylesheet" href="css/sample.css" />
    <script src="../js/jquery/jquery-1.9.0.min.js"></script>
    <!-- <msdropdown> -->
    <link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
    <script src="../js/msdropdown/jquery.dd.min.js"></script>
    <!-- </msdropdown> -->
    </head>

    <body>

    <form name="frmdata">
    <table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
    <tr>
    <td valign="top">
    <select id="payments" name="payments" style="width:250px;">
    <option value="#" data-description="Choos your payment gateway">Payment Gateway</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
    <option value="help.html" data-image="../images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
    </select> &nbsp;
    </td>
    </tr>

    <tr>
    <td valign="bottom"><input type="button" onClick="location=document.frmdata.payments.options[document.frmdata.payments.selectedIndex].value;" value="Submit" /></td>
    </tr>

    </table>
    </form>

   <script>
   //var tc;
   $(document).ready(function(e) {
 $("#payments").msDropdown({visibleRows:4});
 $("#tech").msDropdown().data("dd");//{animStyle:'none'} /{animStyle:'slideDown'} {animStyle:'show'}        
//no use
try {
    var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
                                               var val = data.value;
                                            if(val!="")
                                                window.location = val;
                                        }}}).data("dd");

    var pagename = document.location.pathname.toString();
    pagename = pagename.split("/");
    pages.setIndexByValue(pagename[pagename.length-1]);
    $("#ver").html(msBeautify.version.msDropdown);
} catch(e) {
    //console.log(e);   
}

$("#ver").html(msBeautify.version.msDropdown);
    });

    </script>

    </body>
    </html>

Answer 1

您可以使用Fancybox之类的，

$("input[type='button']").click(function() {
    $.fancybox({
        'padding' : 0,
        'href' : $('#payments option:selected').data('image'),
        'title' : 'Image Demo',
    });
});

Live Demo

注意：使用Jquery version < 1.9，fancybox plugin使用jquery 1.9 version中移除的$.browser()或读取jquery 1.9 Upgrade Guide

灯箱格式的选定选项链接弹出窗口

1 个答案: