Hiển thị một div với Fancybox

Khi nhấp vào một nút, tôi đang cố gắng hiển thị một div ẩn đơn giản trong một hộp ưa thích. Đây là mã mà làm việc:Hiển thị một div với Fancybox

$("#btnForm").fancybox({ content: $("#divForm").html() });

Nhưng từ những gì tôi đã đọc, điều này dường như không thể là cách tiêu chuẩn để thực hiện điều này. Tôi đã thử từng cách sau, không thành công:

$("#btnForm").fancybox({ href: "#divForm" }); 

$("#btnForm").click(function() { 
    $.fancybox({ href: "#divForm" }); 
}); 

$("#btnForm").click(function() { 
    $("#divForm").fancybox(); 
});

Ai đó có thể chỉ cho tôi đúng hướng về cách sử dụng đúng tiện ích này? Dưới đây là html của tôi:

<input type="button" value="Load Form" id="btnForm" /> 

    <div id="divForm" style="display:none"> 
     <form action="tbd"> 
      File: <input type="file" /><br /><br /> 
      <input type="submit" /> 
     </form> 
    </div>

Nguồn

2012-03-18 Adam Rackis

Theo như tôi biết, một yếu tố đầu vào có thể không có một thuộc tính href. Đây là nơi phát sinh vấn đề, bởi vì Fancybox lấy thông tin về nội dung từ thuộc tính này. Mã sau hoạt động hoàn hảo cho tôi, chỉ cần sử dụng phần tử a thay vì phần tử input. Ngoài ra, đây là những gì tôi sẽ gọi là "cách tiêu chuẩn".

<html> 
<head> 
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script> 
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" /> 
</head> 
<body> 

<a href="#divForm" id="btnForm">Load Form</a> 

<div id="divForm" style="display:none"> 
    <form action="tbd"> 
     File: <input type="file" /><br /><br /> 
     <input type="submit" /> 
    </form> 
</div> 

<script type="text/javascript"> 
    $("#btnForm").fancybox(); 
</script> 

</body> 
</html>

See it in action on JSBin

Nguồn

2012-03-18 19:58:43

Hmm - cũng +1 vì có vẻ như nó gần gũi hơn với những gì tôi cần, nhưng hộp ưa thích hiển thị trống vì lý do nào đó. Không có lỗi trong bảng điều khiển và mã có vẻ phù hợp với tôi. Có một loại nào đó không ai trong chúng ta đang nhìn thấy? –

Tôi đã thêm một ví dụ làm việc hoàn chỉnh, ít nhất nó hoạt động cho tôi (OSX với Safari và Firefox) –

Mã đó không hoạt động với Fancybox 1.3, nhưng sử dụng phiên bản mới hơn hoạt động hoàn hảo. Cảm ơn bạn. –

Bạn có thể sử dụng:

$('#btnForm').click(function(){ 
    $.fancybox({ 
      'content' : $("#divForm").html() 
     }); 
};

Nguồn

2012-03-18 19:36:04 aurbano

Đó chỉ là phiên bản dài hơn của những gì tôi đã có.Tôi nghĩ rằng có một cách trực tiếp hơn để có được điều này, bằng cách sử dụng href config tài sản –

True, bạn chỉ có thể sử dụng '$ (" # btnForm "). Click (function() { $ (" # divForm "). Fancybox (); }); ' – aurbano

Tôi cũng đã thử điều đó. Đó là một trong những phiên bản tôi đã thử không thành công. –

giải pháp padde là chính xác, nhưng tăng lên một vấn đề khác ví dụ:

Như đã nói bởi Adam (người hỏi) rằng đó là thấy trống sổ popup. Dưới đây là đầy đủ và làm việc là giải pháp

<html> 
<head> 
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script> 
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" /> 
</head> 
<body> 

<a href="#divForm" id="btnForm">Load Form</a> 

<div id="divForm" style="display:none"> 
    <form action="tbd"> 
     File: <input type="file" /><br /><br /> 
     <input type="submit" /> 
    </form> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("#btnForm").fancybox({ 
     'onStart': function() { $("#divForm").css("display","block"); },    
     'onClosed': function() { $("#divForm").css("display","none"); } 
    }); 
}); 
</script> 

</body> 
</html>

Nguồn

2013-05-02 08:44:43 wakqasahmed

Câu trả lời của bạn tốt hơn. Tôi chỉ muốn thêm cho người mới khác mà trên Fancybox 2 tên thay đổi. 'afterLoad': function() {$ ("# divForm"). css ("display", "block"); }, 'afterClose': function() {$ ("# divForm"). Css ("display", "none"); } – borayeris

Cảm ơn bạn đã chỉ ra 'onStart' và' onClosed'. Điều này sẽ được thêm vào câu trả lời đã chọn. –

Cảm ơn bạn đã bắt đầu và đóng phần bổ sung. Nó giải quyết vấn đề của hộp trống rỗng ban đầu. –

tôi sử dụng cách tiếp cận với phụ thêm "singleton" liên kết cho các phần tử bạn muốn hiển thị trong Fancybox. Đây là mã, những gì tôi sử dụng với một số sửa đổi nhỏ:

function showElementInPopUp(elementId) { 
    var fancyboxAnchorElementId = "fancyboxTriggerFor_" + elementId; 
    if ($("#"+fancyboxAnchorElementId).length == 0) { 
     $("body").append("<a id='" + fancyboxAnchorElementId + "' href='#" + elementId+ "' style='display:none;'></a>"); 
     $("#"+fancyboxAnchorElementId).fancybox(); 
    } 

    $("#" + fancyboxAnchorElementId).click(); 
}

bổ sung giải thích: Nếu bạn thấy Fancybox với tùy chọn "nội dung", nó sẽ lặp lại DOM, đó là yếu tố bên trong. Đôi khi điều này không ổn. Trong trường hợp của tôi, tôi cần phải có cùng các yếu tố, bởi vì chúng được sử dụng dưới dạng.

Nguồn

2014-01-17 18:40:30

Bạn chỉ cần sử dụng này và nó sẽ rất hữu ích cho bạn

$("#btnForm").click(function(){ 

$.fancybox({ 
    'padding': 0, 
    'width': 1087, 
    'height': 610, 
    'type':  'iframe', 
    content: $('#divForm').show(); 
     }); 

});

Nguồn

2014-05-07 05:15:14

đơn giản: ví dụ: nếu div id 'mydiv'

jQuery.fancybox.open({href: "#mydiv"});

Điều này cũng làm cho chức năng mã JS nằm bên trong div.

Nguồn

2015-01-19 16:45:21 Azghanvi

Giải pháp của bạn rất dễ dàng :) – l00k

Đối với người dùng quay trở lại với bài này lâu sau khi câu trả lời ban đầu đã được chấp nhận, nó có thể trả hết cần lưu ý rằng bây giờ bạn có thể sử dụng

data-fancybox-href="#"

trên bất kỳ yếu tố (vì dữ liệu là một thuộc tính HTML-5 được chấp nhận Để có fancybox hoạt động trên dạng nhập liệu nếu vì lý do nào đó bạn không thể sử dụng các tùy chọn để bắt đầu vì lý do nào đó (như nói rằng bạn có nhiều phần tử trên trang sử dụng fancybox và tất cả đều chia sẻ một lớp tương tự mà bạn gọi là fancybox) trên).

Nguồn

2015-04-26 15:48:04 Daemedeor

cảm ơn, hoạt động hoàn hảo – OnengLar

Trả lời

Các vấn đề liên quan