jquery - 如何自定义 Bootstrap 模式，如 tinybox js 弹出窗口

Question

我曾使用过 tinybox。我看到当 tinybox 加载内容时，屏幕上会出现一个带有加载程序图标的小 div。当内容出现时，加载器图标消失，内容设置在 tinybox 弹出窗口中。我说的是这个 tinybox js http://www.dreamcss.com/2009/05/new-javascript-popup-box-tinybox.html

我想用 Bootstrap 模式窗口实现同样的效果。我希望当 Bootstrap 模式显示时，它的高度和宽度将像我发布的带有加载器图标的图像，但是当内容来自服务器端时， Bootstrap 对话框将逐渐调整大小并很好地适应其中的内容。

在这里，我试图说的是逐渐地和很好地，在过去，当我使用 jquery 对话框时，我确实使用动画功能很好地增加了它的高度和宽度，因为这看起来不错。在这里，我试图表达同样的意思，即在将内容附加到 Bootstrap 对话框之前，对话框将逐渐且很好地调整大小。

我在这里尝试了一个，但需要一点帮助。

<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
       <div style="display:none" id="anothermymodal">    

            <div class="modal-body">
              <p>This is a small modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
      </div>

</div>



  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content"  id="mycontent">              
         <div class="inner-div">
            <img src="http://mybusyicon.gif"/>           
         </div>
       </div>
     </div>
</div>

这是 jsfiddle 链接 https://jsfiddle.net/7t2fghtf/1/

如果您测试该示例，那么您必须注意到 Bootstrap 对话框非常大，这是我不想要的。

如果我使用 css 来最小化 Bootstrap 对话框的大小，那么我应该使用什么逻辑或技巧来再次重新压缩 Bootstrap 对话框以正确地适应其中的内容。

看图片

因此，当显示模态时，模态将具有带有加载程序图标的小宽度，当内容来自服务器端功能时，模态宽度将自动增加以适应内容。

请指导我要实现的目标。谢谢

Answer 1

您的代码需要一些更改

<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<div style="display:none" id="anothermymodal">
<div class="modal-body">
<p>This is a small modal.</p><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="loader">
<img src="#" /></div>
<div id="mycontent" style="display: none;">
</div>
</div>
</div>
</div>
在这里检查完整的代码， https://jsfiddle.net/taimursaeed15/Lho9mkkz/1/