模态框 - 只显示框的内部

Question

我正在尝试做一个模态框，它只显示“内部”。

现在我看到了这个：Screenshot

但我想看这个：Screenshot

代码：

<div class="modal-content">
    <div class="modal-body">
        <p>Text1................................</p>
        <p>Text2................................</p>
    </div>
    <div class="modal-footer" style="float:right;">
        <button class="next-button"><i class="fa fa-angle-right"></i></button>
    </div>
</div>

<style>
    .close {
        display:none;
    }

    .next-button:active {
        outline: none;
        border: none;
    }

    .next-button:focus {
        outline: none;
        border: none;
    }

    .next-button:after {
        outline: none;
        border: none;
    }
</style>

所以，我想删除细灰色边框之外的所有内容 - 白色 space 和十字。谁能告诉我，这是如何实现的？谢谢

编辑： 我寻求了另一种解决方案，但没有 javascript，使它变得更加简单： https://gist.github.com/conficient/ba98d1662c659e170ec16650acea05c8

Answer 1

据我了解，您想要这样的东西：

示例：JsFiddle

代码：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-body">
        <p>Text1................................</p>
        <p>Text2................................</p>
    </div>
    <div class="modal-footer" style="float:right;">
        <button class="next-button"><i class="fa fa-angle-right"></i></button>
    </div>
    </div>
  </div>

更新：

CSS:

.next-button {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

或者为了隐藏 X 你可以提供下一个代码：

.modal-header .btn-close {
 display: none !important;
}

模态框 - 只显示框的内部

Modal Box - Show only the inside of the box

html

modal-dialog