I have an ag-grid in my html, and I want to put a button so that when I press that same ag-grid is shown but in a modal to be able to see it in more detail, but it is in the same html, and the ag-grid is exactly the same.
It can be done so that the same ag-grid is seen in the same html and controller.
Since he does not paint me anything but one.
HTML:
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
.....
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
No, it is not possible to render the same grid two times, in a modal and in a background. You would need to make a separate grid and update the values manually.
I also think this would be both terrible for the performance and the usability. The user would see grid-lines in the background when opening a modal (from the original grid) which would change as he modifies the modal-grid; I think this is disturbing. And you would have 2x the amount of rendered rows and input listeners on your screen.
I think the cleaner solution would be to just use one instance of ag-grid and (on button-click) assign class="modal-body" to it, making the container element float with an extended width and dimmed background.
Related
I have found how to disable the auto close of the modal window from bootstrap 3. But i also want to show the window on a page load. When i add the script for this it comes up but then the option for disabling the function to close the modal window when clicked outside of the window doesn't work anymore.
this is the script i use:
`<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>`
and the modal code:
`<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Notification</h4>
</div>
<div class="modal-body">
Are you sure you want to continue?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default align-center" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`
I am working in razor pages, i try hard to redirect user to other page but nothing happen when i click on my anchor neither button.
Tried also redirect using ajax with window.location.replace = "www.google.com"; but i am getting full path anyway and therefore wrong redirecting.
This is my modal
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" style="display: flex; justify-content:center;">
<h5 class="modal-title" id="exampleModalLongTitle">Tittle of modal</h5>
</div>
<div class="modal-body d-flex justify-content-center">
custom text
</div>
<div class="modal-footer">
RedirectTOGoGle
</div>
</div>
</div>
</div>
you need to use the full url. in this case the url is "https://www.google.com"
I am using the bootstrap modal in one of my projects.
This should open page onload and if the user doesn't close the bootstrap modal for a minute. Then its automatically needs to close the bootstrap modal.
How to set the timer for closing the bootstrap modal automatically?
<div class="modal fade bd-example-modal-lg theme-modal" id="overlay" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content quick-view-modal">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
<p>
Context here</p>
</div>
</div>
</div>
</div>
I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).
I would like to ask if anybody can give me some ideas to dynamically resize a Bootrap 3 modal window, with animated effect smoothly. (original question for TB2 by Clannad System)
What should trigger the resize?
Look here: https://stackoverflow.com/a/245011/1596547 You can use this to resize your modal.
html:
<div class="container">
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Resize
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
javascript:
<script>
$('#resize').click(function(){
$(".modal-dialog").animate({"width":"200px"},600,'linear');
}
);
</script>
Easings:
jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.
jQuery UI provides several additional easing functions see: http://api.jqueryui.com/easings/
Or this plugin: http://gsgd.co.uk/sandbox/jquery/easing/ see also: http://easings.net/
Note: For Twitter's Bootstrap 2.x see: https://stackoverflow.com/a/18036895/1596547