I would like to have a modal window using uikit popup in my react application.
When I include this code in my public/index.html file the modal is showing correctly:
<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
But it will not work if I try to use it from inside a react component like this:
<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div className="uk-modal-dialog uk-modal-body">
<button className="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
I can see the link but the click doesn't have any effect.
Am I doing something wrong?
EDIT
I added a jsfiddle, and I confirm the react version is still not working...
https://jsfiddle.net/umfk8jnc/9/
You have to add a data- prefix. Here is an updated JSFiddle link: https://jsfiddle.net/pd8nt5mx/
NOTE React will work with data-uk-* prefixes only.
Source: https://getuikit.com/docs/javascript#component-usage
Related
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary'>Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
</div>
You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.
Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?
You can append as many method calls to the (ngSubmit) i.e
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
You can add one small jQuery code in your HTML file...
Add onclick attribute in button.
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
Use the Angular-UI library - Modal: download minified version here:
First include the library in your module:
angular.module('myModule', ['ui.bootstrap']);
Then, in your controller, you can close the modal within the form submit function:
$scope.submitModule = function(module) {
dialog.close(result);
// REST OF YOUR CODE TO HANDLE FORM INPUT
}
I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.
I have a bootstrap modal given below, which is inside an angular contoller registrationCtrl, which pops up if re-registration is attempted. There is a LOGIN link at the footer of modal, however when I click the link, only the url in browser's addressbar changes. But the page does not navigate to /login, as it is supposed to.
<div class="modals">
<div id="registered" tabindex="-1" role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
<div class="modal_container">
<div id="modal-head"><span>Already Registered</span></div>
<div class="modal_body">
...
</div>
<div class="modal_footer">
<div id="notice"><span>*Please login to continue or cancel to register with different </span></div>
<div class="buttons button-toolbar">
<div class="login btn-vert-block">
<span>LOGIN</span>
<div class="cancel btn-vert-block"> <!--the link that is not working-->
<span>
<button type="button" data-dismiss="modal">CANCEL</button>
</span>
</div>
</div>
</div>
</div>
The modal works perfectly when used as an independent html. What am I missing here?
The link problem was in whole html page and not exclusive to the modal. I found out the problem arose from setting the html5Mode to true:
angular.module("MyAPP",[],function($locationProvider){
$locationProvider.html5Mode(true);
});
The link navigates if we put target='_self' in the anchor tag. I found the solution from here. But I couldnt find the actual reason and explanation. If someone can give me the explanation that would be great help, as I am an angular beginner.
When i click on Show Modal, the myModal modal does not show up.
Instead the URL on browser window itself changes to /myapp/#myModal (unexpected)
What am i doing wrong here?
<div>
<label>I am main page.....</label>
....
<a href="#myModal" data-toggle="modal" data-target="addressModal" >Show Modal</a>
<div id="myModal" class="modal fade">
<div>Hello I am Modal...</div>
<div>Whatever....</div>
</div>
...
</div>
I have following included in my app: twitter bootstrap 2.3.1, and ui-bootstrap-tpls-0.10.0.min.js