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>`
Related
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>
When I use an anchor tag without an href="" all is good and the button style is there, the second a add an href it completely removes the anchor tag and leave only the text inside the parent div
without href:
<div class="container">
<a class="button"> my button</a>
</div>
result in browser devtools
<div class="container">
<a class="button"> my button</a>
</div>
with href
<div class="container">
my button
</div>
result in browser
<div class="container">
my button
</div>
Looks like this could be the work of the link checker. Try adding x-cq-linkchecker="skip":
<div class="container">
<a x-cq-linkchecker="skip" href="/content/mypage.html" class="button"> my button</a>
</div>
I guess it might be also related to xssconfig
as you add 'href' attribute to div in your example
<div href="/content/mypage.html" class="container">
<a class="button"> my button</a>
</div>
In general it is not allowed, therefore AEM can remove it
/libs/cq/xssprotection/config.xml
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.
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