从表单输入类型=“提交”打开 Fancybox（或等效项）

StackOverflow https://stackoverflow.com/questions/969522

  •  13-09-2019
  •  | 
  •  

题

有没有办法获得一个 fancybox （http://fancy.klade.lv/）还是提交表单（带有图像按钮）的任何其他Lightbox？

HTML 看起来像这样：

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

这些不行：

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

有人发现我的错误或有解决方法还是替代脚本？提前致谢

有帮助吗？

解决方案

我相信所有其他的答案错过了问题的要点（除非我是一个误解）。我觉得作者想要的是拥有它，这样当一个表单提交，其结果显示在一个的fancybox。我没有找到任何其他的答案中提供的功能。

要实现这一点，我使用了jQuery表格插件（ http://malsup.com/jquery/form/ ）轻松的形式转换成一个Ajax调用。然后，我使用的成功回调使用手动调用$ .fancybox（）加载的响应到的fancybox。

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

因此，而不是附接的fancybox一些人工标记，则附上给ajaxForm到窗体本身。

其他提示

一个更好的想法是为使用即时HTML，即

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});

尝试此

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

上的按钮的点击你触发在其上被隐藏在href点击。

希望这有助于

的fancybox能够处理Ajax请求直接而不需要额外的jQuery的脚本。

$("#login_form").bind("submit", function() {

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>

基于

  • Garland Pope的原始解决方案[less .ajaxForm]
  • Paolo Bergantino 的 AJAX 调用解决方案 [作为 .ajaxForm 的替代品]
  • Fancybox 由我自己加载动画处理程序 [以便用户知道内容正在加载]

--

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $.fancybox({ 'content' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});

您可以做一个AJAX在会议提交表单数据，存储数据，然后触发链接点击。

该解决方案可能会满足您的目的：

  • 没有ajax调用
  • 使用 fancybox 的 iframe类型 选项
  • 传递 url [+ 数据，通过 jquery 连载 方法]在 fancybox 中 链接地址 选项
  • 加载动画是自动的

--

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});

我刚才一直在努力与这一点，并找到了一种方法看中箱的iframe来显示结果，我不擅长与阿贾克斯又那么需要使用jQuery的任何方式去在这里，我首先回答一个PHP的解决方案！ ：

一个小调整将需要在jquery.fancybox js文件做，我用jquery.fancybox.1.3.4.pack.js。使用任何编辑器等打开这件事，并搜索：name="fancybox-frame：完蛋了，应该只有这一个发现实例，看起来像：

 name="fancybox-frame'+(new Date).getTime()+'"

现在要全重命名：

fancybox-frame'+(new Date).getTime()+'`

到任何你想要的，我只是把它称为："fbframe"并保存文件。现在添加jquery的设置，并形成如下，它应该很好地工作：

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                'width'             : '75%',
                'height'            : '100%',
                'autoScale'         : false,
                'type'              : 'iframe',
                'onComplete':function (){$('#formid').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger('click');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href='#'></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
 <input />
 <input />
 <input id='setID' type='hidden' name='userid' value='' />
 <input type="button" onClick='testfb(123)' />
 </form>

在proccess是：

  

点击提交 - >通话功能 - >功能点击链接FB - >的onComplete

的onComplete FB加载之后它提交表格的IFRAME！完成。

  

请注意我已经撕开了这一点，我目前的项目和刚才编辑的某些必要的部分，我还是一个业余的编码器，如果你能会建议阿贾克斯。而且现在只是使用FB1！ FB2现已推出。

不隶属于 StackOverflow
scroll top