Как сделать модальный диалог без изменения CSS фона?

Question

Как сделать модальный диалог без изменения CSS фона?

0

Я должен сделать модальный диалог на одной странице. Однако, когда я использую следующие строки для создания модального диалога

$("#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, и любая помощь будет оценена!

user2953208 14 дек. 2013, в 07:38

Источник

Теги:

jquery

css

2 ответа

Ещё вопросы

Catalin Sterian · Answer 1 · 2013-12-14T05-11-00.000Z

Это прекрасно работает:

<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>

@ user2953208 и я использую только jquery для этого, пользовательский интерфейс не требуется.
@ Catalin Sterian Но как закрыть диалоговое окно "#montral_txt"?
@ user2953208 Я предлагаю: jQuery ('# blanket'). remove (); В документации jquery вы также можете использовать jQuery («# blanket»). css («display», «none»); , но это не рекомендуется sice каждый раз, когда вы обращаетесь к функции montral (), она создаст новое окно и добавит его в тело. поэтому используйте .remove () function close_montral () {jQuery ('# blanket'). remove (); }

Hamid Bahmanabady · Answer 2 · 2013-12-14T04-05-00.000Z

Когда вы загружаете jquery ui, вы можете выбрать тему дизайна, проверить его по этой ссылке Выбрать тему, щелкнуть по галерее, чтобы просмотреть все темы, но если вы хотите собственный цвет еще и шрифт, фон и т.д., Вы должны изменить css самостоятельно

Для высоты и ширины проверьте внешний div правильно

Я не установил CSS в моем внешнем div
Хорошо, я знаю, я имею в виду, что если вы хотите оценить ширину и высоту, вы должны проверить внешний div