重新创建Modal外观

Question

我有一个需要看起来像附加图像的模态，但在尝试了几种CSS样式后，我无法让它看起来像附加的图像。尝试过像Materialise这样的各种库，但是项目中存在问题。因此，请在 Bootstrap模式中进行回答。模态/弹出窗口应该是透明的，看起来一样。希望得到一些善于引导或CSS的人的帮助。

`     

模态示例

                  

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Headers</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the test</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

并使用以下JS

$("#errorMessageModal").modal({backdrop: false}); $("#errorMessageModal").modal("show");

Answer 1

除非您的客户/老板要求使用Bootstrap模式，否则请忘记Bootstrap模式，并继续使用基于CSS的解决方案：

除了您已经拥有的（jQuery）之外，此代码不需要任何其他库。动画在CSS中完成。

.content-mock div就是为了显示内容将如何与此消息窗口重叠。

＆＃13;

＆＃13;

$("#showbottom").click(function(){
  $("#bottom-message").toggleClass('bottom-message-open');
});

＆＃13;

.bottom-message {
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -moz-transition: .3s all ease-in-out;
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.bottom-message-open {
    max-height: 100px;
    -moz-transition: .3s all ease-in-out;
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.bottom-message-content {
  color: #ffffff;
  padding: 10px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="button" id="showbottom" value="toggle bottom message"/>

<div class="content-mock" style="height: 300px; background-color: #c10; margin-top: 30px;">
    This div is here to show some dummy content
</div>

<div class="bottom-message" id="bottom-message">
    <div class="bottom-message-content">
      The content of message go here
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;