Диалоговое окно JQuery и проблема с div

Итак, у меня есть div «passage-content», и при нажатии кнопки текст этого div помещается в диалоговое окно jquery. Содержимое div постоянно меняется, так как страница динамична. При нажатии кнопки содержимое div "passage-content" изменяется.
Вот мой HTML:

<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>

 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>

 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max"></button>
</div>

Текст «содержимого прохода» — это то, что я пытаюсь захватить и вставить в диалоговое окно.

Я столкнулся с двумя проблемами.
1) В div на странице ничего не появляется, но когда я нажимаю кнопку диалогового окна, текст появляется только в диалоговом окне.
Вот код

  //Opens a dialog box when the button max-passage is clicked
  $('#passage-content').dialog({
   autoOpen: false,
   title: 'Passage'
  });
 $('#max-passage').click(function() {
   $('#passage-content').dialog('open');
  return false;
 });

2) Если я немного изменю свой код, текст появится в div, но тогда моя кнопка диалогового окна JQuery не работает. Вот код

  //Opens a dialog box when the button max-passage is clicked
 $('#passage').dialog({
   autoOpen: false,
   title: 'Passage'
 });
 $('#max-passage').click(function() {
   $('#passage').dialog('open');
   return false;
 });

Я думаю, что моя проблема в том, как я вызываю #passage/passage-content, но я не могу понять это. Большое спасибо за любую помощь!


javascript html jquery jquery-ui
person RYDiiN    schedule 15.07.2015    source источник
comment
Какой браузер вы используете?   -  person danleyb2    schedule 15.07.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно использовать div, отличный от содержимого прохода, чтобы использовать его для диалога:

<div id="passage-section">
 <!-- Title -->
 <div id="passage-title"></div>
  <br/>
 <!-- The panel that will display the content -->
 <div id="passage-content">THIS IS A DIV</div>
  <br/>

  <div id="passage-dialog"></div>
 <!-- Button that when clicked activates a dialog box for the passage. -->
 <button id="max-passage" class="max" onclick="return false;"></button>

  <script>
    //Opens a dialog box when the button max-passage is clicked

    $('#max-passage').click(function() {

      $('#passage-dialog')
        .html($('#passage-content').html())
        .dialog({ title: 'passage' });
    });
    </script>
</div>
person HashPsi    schedule 15.07.2015

arrow_upward
0
arrow_downward

Насколько я понимаю, вы хотите, чтобы контент div#passage был виден на странице, а также находился внутри диалогового окна.

Создайте div на лету, сделайте его диалоговым компонентом и установите содержимое #passage-content в диалоговое окно.

Что-то вроде этого

var $dialog = $('<div></div>').dialog({
    autoOpen: false,
    title: 'Passage'
});
$('#max-passage').click(function () {
    $dialog
        .html($('#passage-content').html())
        .dialog('open');
});

Вот демонстрация http://jsfiddle.net/dhirajbodicherla/db5SX/5434/

person Dhiraj    schedule 15.07.2015