Блог

Главная - Вопросы по программированию - Dart Как мне создать модальную страницу?

Dart Как мне создать модальную страницу?

#html #modal-dialog #dart

#HTML #модальный диалог #дротик #dart

Вопрос:

Я создал свое первое веб-приложение и у меня есть файлы .html, .dart и .css. Я хочу создать модальную страницу, которая будет немного меньше моей страницы и будет сосредоточена на ней. Я действительно не хочу никаких видимых границ. Функция этой страницы заключается в том, чтобы позволить пользователю отображать, используя интерактивные элементы, страницы «Справка» и «О программе», а также страницу, которая позволяет пользователю просматривать список файлов данных, которые были собраны.

Я нашел пару примеров модальных страниц, но они старые. Кажется, что ее легко понять, но редактор Dart помечает пару ошибок и имеет строку, которую я не понимаю, в начале .файл dart.

 #import('dart:html'); // OK just remove the '#"

#resource('modal.css'); // ???

Этот пример находится в DartBlog блоге, который, похоже, не активен и не позволил мне оставить комментарий.

Я был бы признателен за помощь в понимании примера или указание мне на рабочие примеры.

Ответ №1:

Этот оператор импорта является устаревшим синтаксисом Dart.

используйте вместо 

 import 'dart:html';

Я никогда не видел #resource этого, и я уверен, что это тоже больше не доступно.

Вы можете либо добавить тег стиля в свой HTML-файл, например

 <html>
  <head>
    <style>
.black_overlay{
 display: block;
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color: black;
 z-index:1001;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}

.white_content {
 display: block;
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 padding: 16px;
 border: 16px solid orange;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
    </style>
  </head>
  <body>
  </body>
</html>

или поместите содержимое CSS в файл типа styles.css и импортируйте его в свой HTML

 <html>
  <head>
    <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
  </body>
</html>

Я попытался обновить код до текущего синтаксиса (хотя и не тестировался) и добавил несколько комментариев

 import 'dart:html';

void main() {
  //setup the screen elements...
  ButtonElement button = new ButtonElement();
  button.text = "click me";
  //add an event handler
  button.onclick.listen((event) {
    ModalDialog dialog = new ModalDialog("This is a <strong>message</strong>
with html formatting");
    dialog.show();
  });
  //add the button to the screen
  document.body.append(button);

  //add the modal dialog stylesheet
  document.head.append(getStylesheet()); 

}

/**
* Our modal dialog class
*/
class ModalDialog {
  final DivElement _content;
  final DivElement _blackOverlay;
  final ButtonElement _button;

  //Constructor
  ModalDialog(String message) :
    //constructor pre-init
    _content = new DivElement(),
    _blackOverlay = new DivElement(),
    _button = new ButtonElement()
  {
    //constructor body
    _content.id = "modalContent";
    _content.classes.add("white_content");  //set the class for CSS
    _blackOverlay.id = "modalOverlay";
    _blackOverlay.classes.add("black_overlay"); //set the class for CSS

    //Our message will go inside this span
    SpanElement span = new SpanElement();
    span.innerHTML = message;
    _content.append(span);

    //This is the button that will "clear" the dialog
    _button.text = "Ok";
    _button.onClick.listen((event) {
      hide();
    });

    _content.append(_button);
  }

  //remove the modal dialog div's from the dom.
  hide() {
    //find the element and remove it.
    //there is no list.remove(x) statement at present,
    // so we have to do it manually. - UPDATE: now there is
    _content.remove();
    _blackOverlay.remove();
  }

  //add the modal dialog div's to the dom
  show() {
    document.body.append(_content);
    document.body.append(_blackOverlay);
  }
}

/**
* Utility method to get a stylesheet object
*/
getStylesheet() {
  LinkElement styleSheet = new LinkElement(); // maybe 
  styleSheet.rel = "stylesheet";
  styleSheet.type="text/css";
  styleSheet.href="modal.css"; // UPDATE: you don't need to add your CSS to your HTML as shown above because it's done in this code
  return styleSheet;
}

Комментарии:

1. Компилятор немного жаловался, но я смог с этим разобраться и после еще одного исправления заставил его работать. Теперь, чтобы интегрировать его с моим приложением. Спасибо от новичка в Dart / HTML за всю вашу работу.

2. Осталась одна проблема. Компилятор редактора говорит, что document.body.remove(_content); инструкции не принимают аргументы. Если аргумент удален, то все удаляется при нажатии кнопки.

3. Извините, это была ошибка. Просто измените ее на _content.remove();

4. IIRC, когда я пробовал это с помощью автозаполнения .remove(), не отображался… Теперь работает как шарм. Большое спасибо.

5. Рад слышать, что у вас это работает! Если это ButtonElement или аналогичный, он должен перечислять .remove() . Если вы передаете ее, как при приведении обработчика событий, чтобы HtmlElement улучшить работу с автозаполнением clickHandler(Event e) { (e.target as HtmlElement).remove();} , некоторые методы / получатели возвращают более общий Node тип, который имеет гораздо меньшую функциональность.