I have a small modal that appears at the top of the screen periodically. When it appears it blocks typing in inputs and scrolling until it goes away. Is there a way to make the modal non-interruptive so that when it appears it doesn't cause focus change or anything else. I want it to be minimally invasive.
Below is my modal:
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" style="margin-top:10px;" data-backdrop="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Hello World
</div>
</div>
</div>
</div>
If you want a non-interruptive modal, why not use an alert?
https://getbootstrap.com/docs/3.3/components/#alerts
A modal interrupts the user by definition.
Related
I installed your wonderful program flexible view control for XPage. Everything works great. But unfortunately I could not get her to work in a modal window or picklist. I see only the column headings and info (footer). All rows in table is absend, but info (footer) shows real counts rows (in my case 4).
Could you tell me how to do this?
<!-- Modal -->
<div class="modal fade picklist" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<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">x</span>
</button>
<h4 class="modal-title" id="myModalLabel">Choose a record</h4>
</div>
<xc:ccRestView showFooter="true" showFixedHeader="true"
showFilter="true" showInfo="true" showCellBorders="false"
keyIsCategory="false" refreshInterval="0" multiValue="false"
showRefreshButton="true" showFilterText="true" scroller="true"
ordering="true" scrollerCount="500" thisView="ViewBasic"
viewKey="view-definitions"
dataTableClass="tableViewBasic"
rowCallback="ccRestView.defaultRowCallback" filterText="Поиск"
dataTableClassDefault="table table-striped table-bordered">
</xc:ccRestView>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Oleg - see this blog post for how to get the control working with the Bootstrap modal:
https://xpage.me/2020/04/06/a-flexible-view-control-for-xpages-part-7-modals-picklists/
And you can view a working demo here:
http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewPicklist.xsp
Also, in your source above you are missing the modal-body div. This is a required component inside the Bootstrap modal.
The key to loading DataTables inside a modal is initializing the view AFTER the modal has been rendered, especially when the fixed header is being used.
I have a modal form when I click the button I get the form with student data in it.
so the problem is when the modal is opened the sidebar is broken.
here's a screenshot of my problem :
Screen shot
modal :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="memberModalLabel">Edit Member Detail</h4>
</div>
<div class="dash">
</div>
</div>
</div>
</div>
I tried to remove position: relative; for the modal.
but it's not doing anything
when the sidebar is left to right the modal is not affecting the sidebar but when I change it to right to left it breaks
Any idea how I can fix this?
Solved by adding :
.modal-open[style] {
padding-right: 0px !important;
}
I have successfully added a modal from external link in my web-app, but now when I click the button to launch the modal the content of the previous modal is launched. I want it to be reloaded every time.
This is the button for launching the modal.
<button href="/forum/flag_post/0838024b-f210-4f4d-ac53-fd4ade12d533" class="btn btn-default" data-toggle="modal" data-target="#myModal">Report</button>
There are mutliple buttons like this and each one has a different href and once I press a button and close the modal, the same modal content is lauched every button. I don't want that. I want the modal content to be loaded freshly from the URL.
This is the modal class:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
Use JQuery:
<script>
$(document).ready(function(){
$("#modalLinks a").click(function () {
var addressValue = $(this).attr("href");
$(".modalContent").load(addressValue);
});
});
<script>
<div id="modalLinks">
Report
Somewhere
Somewhere too far
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The idea is whenever you click on a link, JQuery update the modal content with ajax.
Can I eliminate some of these divs. I like to keep my code lean. I understand the 5th one b.c. it is the footer, but what about the other 4.
Here is the code
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p>Bookmarks</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the fiddle to run it
https://jsfiddle.net/te4ta7hc/
Let me tell you about the modal window first
Where the modal content is the base which will show after triggering the modal.
Modal Header where we can able to put the heading for our modal window like( Enquiry form).
Modal Body: where the actual content have to be present whatever it may be. Such as Forms, Text contents etc..
Modal footer: where you can add some actions like close button or anything else
So if you want to eliminate the code means you can remove the modal header and footer.. make sure you added button to close modal in modal body
I'm trying to make a bootstrap modal component with the awesome vue.js, but I haven't been able to find a good way to transclude- that is, I want to bundle several nested elements containing the backdrop, modal window, close button, etc. into one component. This component will then need to wrap the markup placed inside of it.
The component
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
// transcluded content goes here.
</div>
</div>
</div>
The content
<bs-modal>
<h1>Some title lol</h1>
<p>The content 'n stuff</h1>
</bs-modal>
Transcluded
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<h1>Some title lol</h1>
<p>The content 'n stuff</h1>
</div>
</div>
</div>
Ah, found it.
http://vuejs.org/guide/components.html#Content_Distribution_with_Slots
You use a special <slot></slot> element to indicate where to transclude.
So,
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<slot></slot>
</div>
</div>
</div>