如何使用纯javascript显示和隐藏模态对话框

How to show and hide modal dialog using pure javascript?

本文关键字：隐藏 模态 对话框 显示 何使用 javascript      更新时间：2023-09-26

我有一个对话框，我想用纯javascript显示/隐藏它。我使用了modal.classList.add（'hide'）；它隐藏了它，但随后整个屏幕都冻结了，我无法点击任何东西。隐藏和显示动画对于我正在构建的对话框来说是最重要的，这就是我采取这种方法的原因。有我的模式对话框

 <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content" >
          <div class="modal-header">
            <a class="close button">
              <paper-button raied  type="button" class="close" id="close" aria-hidden="true" on-click="close">Close</paper-button>
            </a>
            <h2 class="modal-title">Title</h2>
          </div>
          <div class="modal-body next">
            <img class='modal-img' />
          </div>
          <div class="modal-footer">
            <paper-button raied id="previous" type="button" class="pull-left prev" on-click="prev">Previous</paper-button>
            <paper-button raied id="next" type="button" class="next" on-click="next">Next</paper-button>
          </div>
        </div>
      </div>
    </div>

这是关闭对话框和CSS的函数：

close: function() {
        var modal = Polymer.dom(this.root).querySelector(".modal");
        //modal.style.display = "none";
        modal.classList.add('hide');
      }

这是我的样式表：

<style>
@keyframes show {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
@keyframes hide {
    0% {
        display: block;
        opacity: 1;
    }
    99% {
        display: block;
    }
    100% {
        display: none;
        opacity: 0;
    }
}
.element, .element-css {
    animation: show 500ms linear;
    animation-fill-mode: forwards;
}
.hide{
    animation: hide 500ms linear;
    animation-fill-mode: forwards;
}
</style>

你可以试试这个

  Polymer({
    is: 'my-dialog',
    behaviors: [
    Polymer.NeonAnimationRunnerBehavior
    ],
    properties: {
        opened: {
        type: Boolean
    },
    animationConfig: {
        value: function() {
        return {
          'entry': {
            // provided by neon-animation/animations/scale-up-animation.html
            name: 'scale-up-animation',
            node: this
          },
          'exit': {
            // provided by neon-animation-animations/fade-out-animation.html
            name: 'fade-out-animation',
            node: this
          }
        }
      }
    }
  },
  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
  },
  show: function() {
    this.opened = true;
    this.style.display = 'inline-block';
    // run scale-up-animation
    this.playAnimation('entry');
  },
  hide: function() {
    this.opened = false;
    // run fade-out-animation
    this.playAnimation('exit');
  },
  _onNeonAnimationFinish: function() {
    if (!this.opened) {
      this.style.display = 'none';
    }
  }
});

Html

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content" >
      <div class="modal-header">
        <a class="close button">
          <paper-button raied  type="button" class="close" id="close" aria-hidden="true" on-click="close">Close</paper-button>
        </a>
        <h2 class="modal-title">Title</h2>
      </div>
      <div class="modal-body next">
        <img class='modal-img' />
      </div>
      <div class="modal-footer">
        <paper-button raied id="previous" type="button" class="pull-left prev" on-click="prev">Previous</paper-button>
        <paper-button raied id="next" type="button" class="next" on-click="next">Next</paper-button>
      </div>
    </div>
  </div>
</div>

您还可以查看jsfiddle链接

在隐藏关键帧中以100%添加visibility: hidden，以0%添加visibility: visible，因此显示关键帧。

希望对有所帮助

相关文章：