Dart如何创建模式页面？

Nate Lockwood 发表于 Dev

内特·洛克伍德

我已经创建了我的第一个Web应用程序，并且具有.html，.dart和.css文件。我想创建一个模式页面，该模式页面比我的页面要小一些，并以其为中心。我真的不想要任何可见的边框。该页面的功能是允许用户使用可单击的元素来显示“帮助”和“关于”页面，以及允许用户查看已收集的数据文件列表的页面。

我发现了几个模态页面示例，但是它们很旧。似乎很容易理解，但是Dart编辑器标记了几个错误，并且在.dart文件的开头有一行我不理解的行。

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

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

该示例在博客DartBlog中，该博客似乎未处于活动状态，并且不允许我发表评论。

希望能帮助您理解示例或为我提供工作示例。

贡特·佐赫鲍尔（GünterZöchbauer）

此import语句已过时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;
}