Based on the live demo in the Bootstrap examples, I've made this fiddle to show a dialog.
Then this fiddle should bring up the dialog on click, but is not working:
<button type='button' data-toggle='modal' data-target='#myModal'>Click here</button>
It may be obvious, but what am I missing from the above-linked live demo?
I had some trouble getting this to work, I'm not entirely sure, but I think that the issue was mainly the 'External Resources' on JSFiddle.
I have added the jQuery CDN to the fiddle, you can find it here:
https://jsfiddle.net/7ww5ra98/1/
Here is the HTML:
<button type="button" data-toggle="modal" data-target="#myModal">Click Here</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Popup Dialog</h4>
</div>
<div class="modal-body">
<p>Wow, it works!</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">Reset Password</button>
</div>
</div>
</div>
</div>
Hope you found this useful.
Related
I am unable to properly capture data from a modal popup as part of the Html.BeginCollectionItem for a dynamic collection. Could someone point me to a sample?
MainForm.cshtml loads a partial view for items in the model.
_Item.cshtml
Here you would see that I am trying to get the sub-items via modal popup.
#using (Html.BeginCollectionItem("Items"))
{
... details of items
// To get Sub item details via popup
<input class="btn-primary" type="button" value="Add new SubItem" />
<div class="modal fade" id="NewPage_#Model.AddPage.Id" tabindex="-1" role="dialog" aria-labelledby='Button+#Model.AddPage.Id' 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">
loading ...
</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>
</div>
</div>
}
_SubItem.cshtml
#using (Html.BeginCollectionItem("SubItems"))
{
... details of sub-items
}
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 am trying to render a modal with a simple change in my data using a vue #click on an element but I'm not able to get the modal to popup. I am hoping someone can point me in the right direction here.
I'm not using vue-bootstrap in this project just bootstrap 4 for reference here.
my click
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
my Modal
<!--MODAL SECTION-->
<div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--MODAL SECTION-->
my data
data:{
otherData: [],
showModal: false
}
You need data-toggle and data-target on the button:
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button data-target="#myModal" data-toggle="modal" #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
See: https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
Since the modal is controlled via some bootstrap internals, I do not think you need the v-if and #click handler.
My twitter bootstrap modal window isn't loading properly; it is faded when it loads. Here is an image demonstrating the problem.
I have tried a few things but cannot resolve the issue.
My code is:
<button type=\"button\" class=\"btn btn-danger btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" href=\"#myModal\">
<div id=\"myModal\" class=\"modal fade\">
<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\">Confirmation</h4>
</div>
<div class=\"modal-body\">
<p>Do you want to save changes you made to document before closing?</p>
<p class=\"text-warning\"><small>If you don't save, your changes will be lost.</small></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>
</div>
</div></div>
There's invalid syntax in your code example (HTML and Bootstrap). It seems like you're trying to load a warning button before the modal, but you're missing text for the button as well as the closing button tag. Here's a Bootstrap 3 example that should accomplish what you described:
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" href="#myModal">
Save Now!
</button>
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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>
</div>
</div>
Edit the button text to read what you'd like. "Save Now!" is just an example for illustration purposes.
I want to open multiple dialogs using Twitter Bootstrap 3.
How can I do it? Can it be done at all?
First create some modals which you want like this.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
...
</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 -->
Then from your dynamic link switch to your modal using id to link href. Otherwise use onclick javascript event.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
Or (the following option is better for you)
Launch Modal
And from javascript,
<script>
function launch_modal(id) {
// Hide all modals using class if required.
$('.modal').modal('hide');
$('#'+id).modal('show');
}
</script>
another way is to have one this html:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" title="Close">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And many jquery like this to add content:
$('#modal .modal-header .modal-title').html('<strong>:)</strong> Success!');
$('#modal .modal-body').html('<p>Something success!.</p>');
$('#modal .modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal" title="Close">Close</button>');
$('#modal').modal('show');