Question

我创建了我的第一个Web应用程序，并且有.html，.dart和.css文件。我想创建一个比我的页面小一点并且以它为中心的模态页面。我真的不想要任何明显的边界。此页面的功能是允许用户使用可点击元素，“帮助”和“关于”页面以及允许用户查看已收集的数据文件列表的页面进行显示。

我找到了几个模态页面的例子，但它们已经过时了。一个似乎很容易理解，但Dart编辑器标记了一些错误，并且在.dart文件的头部有一条我不理解的行。

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

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

此示例位于博客DartBlog中，似乎不是有效且不允许我发表评论。

我很感激帮助理解这个例子，或者指出我的工作实例。

Answer 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;
}

Dart如何创建模态页面？

1 个答案: