如何自定义bootstrap模式，如tinybox js popup

Question

我使用过tinybox。我看到当tinybox加载内容时，屏幕上会出现一个带有加载程序图标的小div。当内容出现然后加载器图标进入并且内容设置在tinybox popup.i我正在谈论这个tinybox js http://www.dreamcss.com/2009/05/new-javascript-popup-box-tinybox.html

我想用bootstrap模态窗口实现相同的功能。我想当bootstrap模式显示然后它的高度和宽度就像我的图像里面有加载器图标一样，但是当内容来自服务器端时，引导对话框会逐渐调整大小并很好地适应其中的内容。

这里我尝试用逐渐和很好地过去当我使用jquery对话框然后我确实使用animate函数很好地增加它的高度和宽度，因为它看起来很好。在这里我尝试的意思是，在将内容添加到引导程序对话框之前，对话框将逐渐且很好地调整大小。

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

<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/

如果您测试该示例，那么您必须注意我不想要的引导对话框大小。

如果我使用css来最小化引导对话框大小，那么我应该使用什么逻辑或技巧再次重新引用引导程序对话框以使其内部适当地适应内容。

看图

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

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

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/