将div作为jquery中的对话框分离并附加 [英] Detach and Attach div as a dialog in jquery

问题描述

我有一个div与一些id包含一些按钮/标签。它是一个容器本身。我想要一个按钮，当用户点击按钮时，对话框必须显示相同的div，但是div必须从页面中消失。因此，当单击分离按钮时，将出现一个对话框，该div将按钮更改为附加。点击页面时，对话框消失，页面上会显示正常的div。

这是我迄今为止所尝试的，只有当单击Detach时，如果Attach被点击对话框关闭但常规div不显示。

  $（document）.on（'click'，'#detach'，function （）{
 var button = $（this）.text（）; 
 if（button =='Detach'）{
 $（'。search_div_box'）对话框（{autoOpen：对话框（'open'）; 
 $（this）.html（'Attach'）; 
} else if （button =='Attach'）{
 $（'。search_div_box'）。对话框（'close'）; 
 $（this）.html（'Detach'）; 
} 
 
}）; 
  

我知道在附件中缺少一个代码，它只关闭对话框，但我尝试了各种各样的东西，如附加到身体再次div等等，但没有工作。谢谢

解决方案

您可以使用jQuery的 $。clone（）来创建一个 div 的副本，然后与这样的对话框一起显示/隐藏：

  var $ original = $（'。search_div_box'）; 
 var $ clone = $（'。search_div_box'）。clone（）; 
 $ clone.dialog（{
 autoOpen：false，
 width：700，
}）; 
 
 $（document）.on（'click'，'#detach'，function（）{
 var button = $（this）.text（）; 
 
 if（button =='Detach'）{
 $ original.hide（）; 
 $ clone.dialog（'open'）; 
 
 $（this）。 html（'Attach'）; 
} else if（button =='Attach'）{
 $ original.show（）; 
 $ clone.dialog（'close'）; 
 
 $（this）.html（'Detach'）; 
} 
}）; 
  

JSFiddle Here

I have a div with some id that contains some buttons/labels. Its a container itself. I want to have a button that when user clicks on the button a dialog has to appear with the same div but the div has to disappear from the page. So when Detach button is clicked a dialog appears with that div and button changes into Attach. When attach is clicked dialog disappears and regular div appears on the page.

This is what i tried so far, it works only when Detach is clicked, if Attach is clicked dialog closes but regular div does not show up.

   $(document).on('click', '#detach', function() {
      var button = $(this).text();
          if (button == 'Detach') {
           $('.search_div_box').dialog({ autoOpen: false, width: 700 });
           $('.search_div_box').dialog('open');
              $(this).html('Attach');
          } else if (button == 'Attach') {
             $('.search_div_box').dialog('close');
             $(this).html('Detach');
          }

      });

i know im missing a code in Attach part it only closes the dialog but i tried various things like appending to body again the div and so on but didnt work. Thank you

解决方案

You could use jQuery's $.clone() to create a duplicate of the div and then show/hide it along with the dialog like this:

var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
    $clone.dialog({
            autoOpen: false,
            width: 700,
        });

$(document).on('click', '#detach', function() {
    var button = $(this).text();

    if (button == 'Detach') {
        $original.hide();
        $clone.dialog('open');

        $(this).html('Attach');
    } else if (button == 'Attach') {
        $original.show();
        $clone.dialog('close');

        $(this).html('Detach');
    }
});​

JSFiddle Here

这篇关于将div作为jquery中的对话框分离并附加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！