CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Thomas
Thomas

Reputation: 34188

How to customize bootstrap modal like tinybox js popup

i have worked with tinybox. i saw when tinybox load content then a small div appear on screen with a loader icon. when content comes then loader icon goes and content set inside the tinybox popup.i am talking about this tinybox js http://www.dreamcss.com/2009/05/new-javascript-popup-box-tinybox.html

i want to achieve the same with bootstrap modal windows. i want when bootstrap modal will show then its height and width will be like my images posted with loader icon inside it but when content comes from server side then bootstrap dialog will resize gradually and nicely to fit the content inside it.

here i try to mean gradually and nicely in the past when i worked with jquery dialog then i did increase its height and width nicely with animate function because that looks good. here i try to mean the same that before appending content inside bootstrap dialog the dialog will resize gradually and nicely.

here i tried one but need small help.

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

here is jsfiddle link https://jsfiddle.net/7t2fghtf/1/

if you test the example then you must notice bootstrap dialog size is huge which i do not want.

if i use css to minimize the bootstrap dialog size then what logic or trick i should use to rezide bootstrap dialog again to fit the content inside it properly.

see the picture enter image description here

so when modal will be shown then modal will have small width with loader icon and when content comes from server side function then modal width will increase automatically to fit the content.

please guide me what i am trying to achieve. thanks

Upvotes: 0

Views: 767

Answers (1)

Lorem Ipsum
Lorem Ipsum

Reputation: 357

Your code needed some changes

<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> Check complete code here, https://jsfiddle.net/taimursaeed15/Lho9mkkz/1/

Upvotes: 2

Related Questions