如何更改引导模式打开的方向？答案

【问题标题】：How can I change the direction of the bootstrap modal opening?如何更改引导模式打开的方向？
【发布时间】：2014-10-20 18:29:17
【问题描述】：

我想改变我的引导显示模式的打开方向。我遵循了LINK 中讨论的代码，但我的模式没有打开，我正在使用angularjs。谁能帮我写代码？

我的按钮

<td>
    <a class='btn btn-primary btn' data-direction='right'>Right</a>
</td>

引导程序Bootstrap v3.2.0

link 中提到的我的 CSS 和 JS。我如何将它与 Angular 一起使用，它在我的情况下不起作用。

【问题讨论】：

请在您的问题中发布一些代码...
Bootstrap 版本以及所需代码
@user284303 老实说，你必须做得比这更好。您给我们的一行代码根本没有帮助。你的样式表中有什么 CSS？你是如何声明你的模态的？

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

要打开一个模式，您可以使用 javascript 或数据属性。您似乎都没有使用。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

注意data-toggle 属性 - 这告诉引导程序它是一个模态的，它应该作为一个模态打开。

注意data-target 属性 - 这是你的模态容器。

【讨论】：

【解决方案2】：

我使用 CSS 的过渡解决了这个问题。

这是打开方向的非常简单的示例。

(SlideLeftIn 过渡效果)

.modal .modal-dialog {
  opacity: 0;
  left: -30px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal .modal-dialog.show {
  position: fixed;
  top: 0px;
  left: 0px;
  margin: 0px;
  height: 100%;
  max-width: 100%;
  overflow: auto;
  opacity: 1;
  transition: opacity 0.35s;
  transition: left 0.35s;
}

欲了解更多信息，请参阅this from W3Schools.

【讨论】：