在没有标准离子组件的情况下在Ionic中实现简单模态，会出现错误

Question

我在Ionic中创建了一个页面。现在在这个页面上我想调用一个简单的css模式框。所以我添加了一些CSS和HTML codeinpage.htmlandpage.scss`但是当我点击按钮时它说

未捕获（承诺）：要插入的视图无效

以下是我的代码：

page.html中

<div class="css-script-ads" align="center">

  <a href="#target-content" id="button">Open A Modal</a>
  <div id="target-content"> <a href="#" class="close"></a>
    <div id="target-inner">
      <h2>CSS Modal</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis, justo tempor elementum malesuada, ligula sapien convallis nulla, quis mollis augue tortor tristique mauris. Mauris sed nunc in ante molestie pulvinar ac in orci. </div>
  </div>

page.scss

page-webpage {
    #target-content {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        -webkit-transition: opacity 200ms;
        transition: opacity 200ms;
      }

      #target-content:target {
        pointer-events: all;
        opacity: 1;
      }

      #target-content #target-inner {
        position: absolute;
        display: block;
        padding: 48px;
        line-height: 1.8;
        width: 70%;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
        background: white;
        color: #34495E;
      }

      #target-content #target-inner h2 { margin-top: 0; }

      #target-content #target-inner code { font-weight: bold; }

      #target-content a.close {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #34495E;
        opacity: 0.5;
        -webkit-transition: opacity 200ms;
        transition: opacity 200ms;
      }

      #target-content a.close:hover { opacity: 0.4; }

      body {
        background-color: #ECF0F1;
        color: #444;
      }

      #button {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        padding: 16px 24px;
        border-radius: 1px;
        text-decoration: none;
        font-size: 24px;
        display: block;
        color: white;
        background-color: #34495E;
        text-align: center;
        font-weight: 100;
        -webkit-transition: box-shadow 200ms;
        transition: box-shadow 200ms;
        border-radius: 4px;
      }

      #button:hover { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); }
}

如何在没有错误的情况下使其正常工作？

出于某种原因，我不想使用Ionic预制组件。

Answer 1

试试这样

删除href="#target-content"

并替换这个(click)="openModal({charNum: 0})"

进口ModalController

并把它放在`openModal（characterNum）{

let modal = this.modalCtrl.create(FeedsPage, characterNum);
modal.present();

}`

了解有关Ionic-Modals的更多信息