JQueryUI对话框窗口不在我的DIV，放置在正文下。如何保持我的div？ [英] JQueryUI Dialog Window Not Inside My DIV, Placed Under Body. How to keep inside my div?

问题描述

假设我有以下html：

HTML ：

 < div id =wrapper> 
< div class =dialogtitle =Bold Red Test> 
< div class =bold red>对话框红框Here< / div> 
< / div> 
< / div> 
  

JS：

  $（document）.ready（function（）{
 $（'＃wrapper'）。find（'。dialog'）。dialog（{
 autoOpen：true 
 width：200，
 height：200 
}）; 
}）; 
  

此代码将生成一个对话框，当页面正确加载时打开。我的目标是让对话框内的文本是红色和粗体。因此，我想使用以下CSS

CSS：

不想摆脱#wrapper选择器。我知道如果我摆脱这将工作。

  #wrapper .bold {font-weight：bold; } 
 #wrapper .red {color：＃F00;} 
  

在CSS中，以便它只应用这些设置到这个特定的对话框，当它的包装内。问题是这些CSS规则 不适用

我已经将问题跟踪到HTML对于移动到< / body> 标记正上方的对话框。 css包装选择器不能将规则设置为粗体或红色，如果对话框是实际上是在身体 下，但对于我的项目，我需要使对话框在包装内 。

有没有办法让jQuery对话框保持对话框在HTML的起始位置？

这意味着它将仍然在包装器div为我的例子，而不是在< / body> 标签下移动。这是可能吗？

解决方案

我猜你在寻找appendTo选项

http://api.jqueryui.com/dialog/#option-appendTo <

  $（＃ wrapper）.dialog（{
 appendTo：body
}）; 
  

我试过这个。

  $（#wrapper）.dialog（{
 appendTo：#wrapper
}）; 
  

我有错误，所以我建议像这样

  $（body）。append（< div id ='dialog-wrapper'>< / div>）; 
 $（＃dialog-wrapper）。html（$（＃wrapper）。html（））; 
 $（＃wrapper）。html（）; 
 $（＃dialog-wrapper）。dialog（{
 appendTo：#wrapper
}）; 
  

Let say I have the following html:

HTML:

<div id="wrapper">
    <div class="dialog" title="Bold Red Test">
        <div class="bold red">Dialog Red Box Here</div>
    </div>
</div>

JS:

$(document).ready(function(){
   $('#wrapper').find('.dialog').dialog({
    autoOpen: true
    width:200,
    height:200
    });
});

This code will generate a dialog box that opens when the page loads correctly. My goal is to have the text inside the dialog box be red and bold. So I want to use the following CSS

CSS:

NOTE: I DO NOT want to get rid of the #wrapper selector. I'm aware it'll work if I get rid of that.

#wrapper .bold{font-weight:bold;}
#wrapper .red{color:#F00;}

I'm using selectors in CSS so that it only applies these settings to this particular dialog when its inside of wrapper. The problem is these CSS rules do not apply

I have tracked down the issue to the HTML for the dialog being moved to right above the </body> tag. The css wrapper selectors can't set the rules for bold or red if dialog is actually under body but for my project I need to have the dialog be inside of wrapper.

Is there a way to have the jQuery Dialog keep the dialog box in its starting location in the HTML?

This means that it would physically still be inside of the wrapper div for my example instead of moving under the </body> tag. Is this possible?

解决方案

i guess you looking for appendTo option

http://api.jqueryui.com/dialog/#option-appendTo

if you want to keep it inside body

$( "#wrapper" ).dialog({
 appendTo: "body"
 });

i tried this one

$( "#wrapper" ).dialog({
 appendTo: "#wrapper"
 });

i got error ,so i suggest to make it like this

    $("body").append("<div id='dialog-wrapper'></div>");
    $("#dialog-wrapper").html($("#wrapper").html());
    $("#wrapper").html("");
    $("#dialog-wrapper").dialog({
       appendTo: "#wrapper"
    });

这篇关于JQueryUI对话框窗口不在我的DIV，放置在正文下。如何保持我的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！