How to play fade in effect of modal bootstrap for dialog jquery ui?

Question

How to play fade in effect of modal bootstrap for dialog jquery ui?

Navigation

#1 by (2 votes)

3

I am standardizing the modal visualization effects, in this project I have both modal bootstrap and dialog, it happens that both have different effects. wanted to just leave them with fade 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" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="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" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><divid="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 bootstrap fade css and add it to the dialog, but it did not work.

Example in jsfiddle

jquery-ui bootstrap

asked by anonymous 20.09.2016 / 16:04

1 answer

How to make the HTML table inside another table occupy the entire screen? Open mobile keyboard automatically

score 2 · Accepted Answer

I found this answer in link , I think that's what you're looking for: link

Reference: link

They are not exactly the same but sometimes it is a good temporary solution until you have been able to change everything to Modal:)

I'll put the code here if the reference is 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" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="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" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><divid="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>