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

Asked

Viewed 2,320 times

3

I am standardizing the modal visualization effects, in this project I have both bootstrap modal and dialog, it turns out that both have distinct effects. wanted to leave them only with fade in, bootstrap pattern.

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>
<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" rel="stylesheet" />
<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 bootstrap fade css and add it in the ui dialog, but it didn’t help.

Example in jsfiddle

jquery-ui bootstrap

  • And create a dialog with modal? remove footer and maintain header. No use?

  • The issue is not the appearance, because this I solved in css, the two are equal, the problem is the transition effect in the modal of the bootstrap it goes down, in the dialog it only appears increasing the visibility

  • Yes, but the idea I gave would solve this problem, if they were both modal.

  • You are talking to remove all dialog and leave only modal?

  • Yes, and use modal as dialog. It cannot be?

  • This is a definitive solution that I intend to adopt, but the system is very large and uses a lot of dialog, it would not be something quick to do, all new implementations are already requested to create in the modal model of bootstrap...

  • I think it was the best way, while that leaves it at that, there’s no great stress, or there’s?

  • I think the problem is in css

Show 3 more comments

1 answer

2


I found this answer in https://stackoverflow.com/, I think that’s what you’re looking for: http://jsfiddle.net/945Tt/4/

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

They are not exactly the same but sometimes it is a good temporary solution until you managed 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>
<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" rel="stylesheet" />
<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>

Browser other questions tagged jquery-ui bootstrap

You are not signed in. Login or sign up in order to post.