I want to use modal popups for editing and inserting at view html but i couldn't be sure how to do this?
Is there any way to do this?
I don't want to create new html for insert form because there is only name field. Modal pop-up will suit perfectly i think.
Create your html
<div id="demoDialog" title="Dialog Title">
<!-- Content, form, etc. -->
<form></form>
</div>
Initialize the dialog window
Reference: http://api.jqueryui.com/1.8/dialog/
// Dialog creation
$("#demoDialog").dialog({
resizable: false,
draggable: false,
autoOpen: false,
modal: true,
open: function(){
$(".ui-widget-overlay").hide().fadeTo(800, 0.8);
}
});
// Open the dialog
$("#showDialog").click(function(){
$("#demoDialog").dialog( "open" );
return false;
});
You can use a partial view to load your html content. Have inside your dialog ID somehow to store the value returned from the modal window if you need to feed it to another form or processing.
Related
I am installing this modal dialog on a client's website, with practically no modifications.
However, I could not find how to make the modal dialog display on page load in the documentation.
Right now it just says:
<!-- Link to open the modal -->
<p>Open Modal</p>
But I am sure there is a way to make it just open on load.
I am using a hosted version of jQuery (jquery.min.js, jquery.modal.min.js) so I'm not trying to add/edit code in the JS file.
http://github.com/kylefox/jquery-modal Method 2: Manually:
$(function() {
$('#login-form').modal();
});
You need to create on your html a div like this:
<div ng-include="'/Somepast/busyModal.html'" ng-show="isLoading"></div>
<div> after load</div>
Then in your javascript you create:
function init() {
$scope.isLoading = true;
SomeFunction().then(function (data) {
$scope.isLoading = false;
}, onError);
};
that's it.
I am using bootbox alert in my angular2 application to display information to the user on the UI. I am displaying href links in the alert message. When the user clicks on any of the href links, the page should be navigated to that link and also the bootbox alert modal should get closed.
In my code, the page is navigated to the href link. However, the modal is not getting closed. How can i achieve this?
Below is my code:
bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
Any inputs appreciated!
You can capture the modal object that is created (see https://jsfiddle.net/q1Lm385a/1/):
var $mymodal = bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
That would make it relatively easy to manually dismiss the modal:
$mymodal.on('click', '.bootbox-body a', function(e){
$mymodal.modal('hide');
});
Bootbox also has a global function you can call:
$mymodal.on('click', '.bootbox-body a', function(e){
bootbox.hideAll();
});
I'm following this angular recipes page for adding a modal dialog to my ui. It suggests the following markup, which I've added to one of my views.
... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
... etc, from the recipe doc
</div>
What I want to see is my view, plus an "Open Modal" button on the bottom and nothing else. What I see instead is the button and the content of the modal already visible on the page.
The very next words in the recipe doc are:
Note that even though we don’t specify it explicitly the modal dialog
is hidden initially via the modal attribute. The controller only
handles the button click and the showModal value used by the modal
attribute.
Why is my modal mark up initially visible on the page? I think I have installed angular-ui properly... in my index.html:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
And in my app JS:
angular.module('MonteAdmin', [
...
'ui.bootstrap',
...
])
That recipes page is likely out of date. At the time of the writing it might have been possible to pass a variable showModal to the modal directive to reveal or hide it. In your controller, you would have been able to show the modal by setting the scope variable showModal to true or false:
$scope.showModal = false;
$scope.open = function() {
$scope.showModal = true;
}
The current version does not work that way. You will have much better experience if you read the official documentation for the library at Angular UI Bootstrap
If you are using the latest version of the library, the directive is no longer modal but uib-modal. In addition, you have a bit more work to do to implement your modal.
Modal markup should be in a script tag, with a type set to text/ng-template as per the official example:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
To actually open the modal, your button click should trigger the following example function:
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
You must also define a controller for the modal, itself:
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
All of this code is found on the official documentation for Angular UI Bootstrap
I need to display a form on my homepage (Wordpress site) in a popup. It is my own form and not a contact 7 or something else.
I want a popup plug-in or the code which can do the same on my home page.
I tried many plug-ins but some has their own form designing which does not give me feature to add my form to it.
I need a plain HTML good looking popup.
You can use JQuery 'dialog' to open a popup with your form.
Simply embed your form in a div with an id and convert it into a dialog.
HTML
<button type="button" id="but" >Open Popup</button>
<div id="dialogForm">
<form id="myform" method="post">
Name:
<input type="text"/><br/>
Phone:
<input type="text"/><br/>
<button type="submit"> Submit </button>
</form>
</div>
JavaScript
$('#but').click(function() {
$("#dialogForm").dialog("open");
});
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
JavaScript for loading the dialog on load of the homepage
Note that the 'autoOpen' is set to true.
$(window).load(function() {
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
});
Here's the fiddle: http://jsfiddle.net/sve3Lmje/
Fiddle for opening dialog without click: http://jsfiddle.net/sve3Lmje/1/
I am using jquery ui Dialog box. It works fine but I have a requirement that with one button I should be able to create a dialog box with each click.
So Eg: On first click a dialog box is opened. On second click, a new dialog must be created with the first one intact at it's place. I am implementing sticky notes using this.
How can this be achieved??
You can create Modal Dialog Dynamically
$("button").click(function () {
var dynamicDialog = $('<div id="MyDialog">cotent </div>');
dynamicDialog.dialog({
title: "Success Message",
modal: false,
buttons: [{
text: "Yes",
click: function () {}
}]
});
});
Demo
Note: since all come on same location just move and see the new dialog in the demo