Question

我必须在一个页面中创建一个模态对话框，但是，当我使用以下行创建一个模态对话框时

$("#mydiv").load("./d3present.html").dialog({height:900,width:700,modal:false,draggable: false});

新对话框改变了我的背景css，我不知道如何处理它。而且，我设置的高度和宽度也不起作用。他们是这样的：

<div id="mydiv" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 839px;"

还有另外一个问题：当我加载'd3present.html'页面时，它会加载几个javascripts，但我的原始js已经消失。所以，当我关闭对话框时，原始页面上的操作不像以前一样，少了js文件。

由于我是jquery的新手，我们将不胜感激任何帮助！

Answer 1

这个问题很好：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function montral(){
jQuery('<div/>',{
'id'        : 'blanket',
'css'       : {
    'position'          : 'fixed',
    'background-color'  : 'rgba(0,0,0,0.5)',
    'width'             : '100%',
    'height'            : '100%',
    'top'               : '0',
    'bottom'            : '0',
    'left'              : '0',
    'right'             : '0',
    'z-index'           : '100',
}
}).appendTo('body')


jQuery('<div>',{
id      : 'montral_txt',
'css'   :{
    'z-index'           : '1001',
    'position'          : 'fixed',
    'background-color'  : '#fff',
    'width'             : '400px',
    'left'              : '50%',
    'margin-left'       : '-200px',
    'top'               : '0',
    'bottom'            : '0',
    'margin-top'        : 'auto',
    'margin-bottom'     : 'auto',
    'max-height'        : '500px',
    'overflow-y'        : 'scroll',
    'overflow-x'        : 'hidden',
}
}).appendTo('#blanket');
}



</script>

<body onload="montral()">


</body>

Answer 2

当您下载 jquery ui 时，您可以选择设计主题，请在此链接中查看Select Theme 点击图库查看所有主题，但如果你想要自定义颜色别的和字体，背景等你应该自己改变css

对于高度和宽度，请检查外部div是否正确

如何在不改变背景css的情况下进行模态对话？

2 个答案: