jquery-ui – How to reproduce fade in effect from modal bootstrap for dialog jquery ui?

Question:

I'm standardizing the modal visualization effects, in this project I have both bootstrap and dialog modal, it turns out that both have different effects. I wanted to just fade them in, default bootstrap.

Example:

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    show: "fade"
  });

  $("#btnDialog").on("click", function() {
    $("#dialog").dialog("open");
  });

  $("#btnModal").on("click", function() {
    $("#modal").modal("show");
  });
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<button id="btnDialog">Open Dialog</button>
<button id="btnModal">Open Modal</button>

I tried to get the css from the bootstrap fade and add it to the ui dialog, but to no avail.

example in jsfiddle

Answer:

I found this answer at https://stackoverflow.com/ , I think this is what you are looking for: http://jsfiddle.net/945Tt/4/

Reference: https://stackoverflow.com/questions/17100651/how-can-i-make-jquery-modal-dialog-and-bootstrap-same

They're not exactly the same but sometimes it's a good temporary solution until you managed to change everything to Modal 🙂

I'll put the code here if the reference becomes unavailable.

$(function() {
  
$("#btnModal").on("click", function() {
    $("#modal").modal("show");
});  
  
$( "#dialog" ).dialog({
autoOpen: false,
    position: { my: "center top", at: "center top+50", of: window },
show: {
effect: "drop",
duration: 1000,
    easing:"easeOutExpo",
    direction:"up", 
    distance:300, 
},
hide: {
effect: "drop",
duration: 800,
    easing:"easeInExpo",
    direction:"up", 
    distance:300, 
},
    beforeClose: function( event, ui ) {
        $( ".overlay" ).hide();
    }
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
    $( ".overlay" ).show();
});
});
body {
    font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
    font-size: 62.5%;
}

.overlay { background-color:rgba(0,0,0,0.5); position:fixed; width:100%; height:100%; top:0; left:0; }
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<button id="opener">Open Dialog</button>
<button id="btnModal">Open Modal</button>

<div class="overlay" style="display:none;"></div>
Scroll to Top