Диалог jQueryUI выглядит неправильно (отсутствует стиль?)

У меня есть IE 11, и я пытаюсь открыть диалоговое окно одним нажатием кнопки, но открывающееся диалоговое окно не то, что я хочу. У него нет значка «закрыть», и макет также очень низок.Диалог jQueryUI выглядит неправильно (отсутствует стиль?)

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="//malsup.github.com/jquery.form.js"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap"> 
    <div class="dialog"> 
     <p style="white-space: pre-wrap"><%=solution%></p> 
    </div> 
    <button class="opener">Open Dialog</button> 
</td>

Я добавил pre-wrap везде, но текст, кажется, пришел в одну линию. Текст правильно отформатирован в базе данных.

JQuery код:

$('.opener').each(function() { 
    var dialog = $(this).prev('.dialog').dialog({ 
     autoOpen: false, 
     show: { 
      effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
      effect: "explode", 
      duration: 1000 
     } 
    }); 

    $(this).click(function() { 
     dialog.dialog("open"); 
     }); 
    }); 
});

источник

2015-07-27 amol singh

обновил свой ответ на адрес, который вы Струнные Проблема с форматом – bwright

'<стиль = "бело-пространстве: предварительно обертку">' Это не правильный HTML. Угадай, что это опечатка? – epascarello

yeah thats typo ... –

Ах Ха ... Я перечитал свой вопрос, и я думаю, Я понимаю проблему, которую вы видите.

jQuery UI-диалоги требуют (1) ссылки jQuery UI css, AS WELL AS (2) код пользовательского интерфейса jQuery, AS WELL AS (3) plain ol 'jQuery.

Не менее важно, вам необходимо соответствовать версиям. Когда версии не совпадают (особенно, когда jQUI и css для jQUI предназначены для разных версий), кнопки будут выровнены, границы будут отсутствовать, весь внешний вид будет удален. У вас есть версия-itis (примечание: -титы - латинский суффикс для боли).

Предложение:

Удалить все ссылки на JQuery/JQuery UI в коде и добавьте следующие строки внутри <head> тегов вашей страницы:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Это даст вам версию JQuery/jQueryUI/css, которые, как известно, работают вместе. Если он работает, вы можете даже придерживаться его.

Ссылка:

Matching jQuery and jQuery-UI versions

источник

2015-07-27 20:34:27 gibberish

это определенно проблема .. но приведенные выше версии до сих пор не работают .. может быть, некоторые другие версии будут работать –

Вот код, который должен работать:


 
    <title>jQuery UI Dialog - Animation</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#dialog").dialog({ 
 
     autoOpen: false, 
 
     show: { 
 
     effect: "blind", 
 
     duration: 1000 
 
     }, 
 
     hide: { 
 
     effect: "explode", 
 
     duration: 1000 
 
     } 
 
    }); 
 
    
 
    $("#opener").click(function() { 
 
     $("#dialog").dialog("open"); 
 
    }); 
 
    }); 
 
    </script> 
 

 
<body> 
 
    <table> 
 
     <tr> 
 
      <td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap"> 
 
       <div id="dialog" title="Basic dialog"> 
 
        <%=solution%> 
 
       </div> 
 
    
 
       <button id="opener">Open Dialog</button> 
 
      </td> 
 
      </tr> 
 
     </table>

http://fiddle.jshell.net/0n4exLq8/

Что касается проблемы с форматированием, похоже, у вас в вашей БД есть строки, которые html не сможет отобразить. Вам придется форматировать строку на стороне сервера (замените \ п с <br />) или еще лучше преобразовать его в <ol>

источник

2015-07-27 13:44:09 bwright

, но как добавить так много '
', btw, его работая нормально, когда это выставляется в 'textarea' –

textarea немного более гибкая, когда дело доходит до формирования. угадывая, что вы используете php try 'nl2br()': http://php.net/nl2br – bwright

Я использую 'jsp' –

Это dosen't есть значок закрытия и расположение тоже очень беден

Я только test your example, он прекрасно работает в IE 11.

HTML:

<div class="dialog"> 
    <p style="white-space: pre-wrap">123123123</p> 
</div> 

<button class="opener">Open Dialog</button>

JS:

$('.opener').each(function(){ 
    var dialog = $(this).prev('.dialog').dialog({ 
     autoOpen: false, 
     show: { 
      effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
      effect: "explode", 
      duration: 1000 
     } 
    }); 

    $(this).click(function() { 
     dialog.dialog("open"); 
    }); 

});

источник

2015-07-27 13:44:17 SiZE

добавил изображение, чтобы показать диалоговое окно, я получаю –

Существует более простой способ работы с диалоги jQueryUI.

Вам нужен только один диалог и просто повторно используйте его.

Во-первых, важно понять, как работает диалог JQUI. Вы «назначить» элемент (ДИВ) в диалоговом окне при инициализации:

$('#msg').dialog();

После этого при каждом вызове открытым способом для диалога

$('#msg').dialog('open');

диалоговое окно отображается с содержимым, что дела.

Чтобы изменить содержимое диалогового окна, просто измените содержимое этого DIV:

$('#msg').html('<p>Here is some totally new information</p>'); 
$('#msg').dialog('open');

В вашей программе, все, что вам нужно сделать, когда нажата кнопка, чтобы захватить данные (либо с помощью AJAX , или из соседней ячейки, или любой другой) и вставьте ее в div диалога, затем откройте диалоговое окно.

При закрытии диалогового окна, это хорошая идея, чтобы очистить DIV, а также:

$("#dialog").dialog({ 
    autoOpen: false, 
    show: { 
    effect: "blind", 
    duration: 1000 
    }, 
    close: { 
    effect: "explode", 
    duration: 1000, 
    function(){ 
     $('#msg').html(''); 
    } 
    } 
});

jsFiddle Demo

источник

2015-07-27 14:37:11 gibberish

Я получаю функциональность, но форматирование и layot прокляты бедные –

Формат вашего div. Независимо от того, какое HTML/CSS-форматирование вы делаете для содержимого jQUI div, будет отображаться в диалоговом окне. Ничего волшебного не происходит - диалог jQUI просто отображает содержимое назначенного div * точно *, как есть. – gibberish

@amolsingh На самом деле, ваша работа будет проще, если вы забудете о диалоге на мгновение. Создайте видимый div, '

', и когда пользователь нажмет кнопку, получите нужные данные и вставьте их в div 'mytest'. Разбирайте данные, отформатируйте их по своему желанию, сделайте так, чтобы каждый раз при нажатии кнопки он выглядел так же, как вы хотите. * (Помните, что для тестирования этот div виден) * Затем инициализируйте диалог jQUI с этим div: ** '$ ('# mytest'). Dialog ({autoOpen: false и т. Д. И т. Д.});' ** и Я гарантирую, что вы будете довольны результатом. – gibberish

Диалог jQueryUI выглядит неправильно (отсутствует стиль?)

ответ

Смежные вопросы