Anchor tag on which html popover
<a popover-trigger="outsideClick" popover-placement="top" ng-click="sendMessagePopover.open()" type="button" popover-append-to-body="true" popover-is-open="sendMessagePopover.isOpen" uib-popover-template="sendMessagePopover.templateUrl">Menu</a>
ng-Template that contains close button on which click popover should close.
<script type="text/ng-template" id="message-to-pnd-popover.tpl.html">
<div class="well">
<form name="myForm" ng-controller="myController">
<div class="form-group">
<span class="btn btn-primary" ng-click="sendMessagePopover.close()">Close</span>
</div>
</form>
</div></script>
angular controller code
angular.controller('myController',['$scope',function($scope){
$scope.sendMessagePopover = {
on: false,
isOpen: false,
templateUrl: 'message-to-pnd-popover.tpl.html',
open: function() {
$scope.sendMessagePopover.isOpen = true;
},
close: function() {
$scope.sendMessagePopover.isOpen = false;
}
}]);
When we click on anchor link it popover the template and when we click outside anywhere it close the popover.
I want to close the popover when user click on close button that i put in template.
But it's not working.
I am new this technology, help out with proper example.
The popover-trigger="outsideClick" is designed to close the popover when clicking anywhere outside of the popover content. If you want to manage opening and closing the popover using the is-open attribute, use popover-trigger="none".
Related
I create the form every time a pop-up modal is opened:
<form method="post" data-asset-share-id="download-modal"
class="ui modal cmp-modal-download--wrapper cmp-modal transition visible active"
style="top: 151px; display: block !important;">
"Some html"
</form>
I want to know if the pop-up modal is active using jQuery.
You can bind an event handler for the modal, there are custom events in semantic-ui modal. In your case, you can use onVisible or onShow event.
$('.modal').on('onVisible', function(){
// your code here
})
I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,
I have two element in the same page:
one is into a div and another one is into an overlay.
I want to display only the element inside the overlay and not element in the page (it is also hide by overlay).
I don't know how can I prevent this... I bind the directive by attributes, maybe should I pass some other params to element?
This is plunker example: Plunker
As you can see, I want to hide text in page when modal (simple example, but I use another plugin) is open and show it in modal and viceversa... I preferer to use only directive and/or some more attributes in the element...
I test a lot but I don't find solution...
Code:
angular...[]....directive('example', function() {
return {
restrict: 'A',
replace: true,
link: function($scope, $element, $attrs) {
$scope.display = "IT's WORK TEXT BY DIRECTIVE";
}
};
});
<script type="text/ng-template" id="myModalContent.html">
<!--Modal-->
<div class="modal-body">
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
You can use a combination of ng-show and a js closure passed to the modal for toggling the visibility of your text. So... the display visibility will be controlled by the ng-show
<span example="" ng-show="elemVisibility" class="text-danger"><br><br>{{display}}<br><br></span>
You can toggle the visibility with a js helper function
function _setElemVisiblity (isModalOpen) {
$scope.elemVisibility = !isModalOpen;
}
You can pass this as a callback to your modal and trigger it whenever you open/close the modal.
Updated plunk here
I'm using Bootstrap3 and I want to create popover to show in on pages or document has loaded then show popover on the each html element without using hover,click, focus But it worn't work as what I want.
And How can I create disable button on popover when popover pop up after pages loaded which easy for me click hide pop up back?
<script type="text/javascript">
$(document).ready(function(){
$(".popover-examples a").popover({
placement:'auto',
title : 'a',
animation:true,
trigger:'hover',
content:'a',
// delay: { show: 0, hide: 5000000 },
container:'body',
viewport:'#viewport',
template:'<div class="popover"><div class="arrows"></div><input type="button" class="btn btn-warning btn-sm hide-popover" value="Hide"><h3 class="popover-titles">popver-title</h3><div class="popover-contents">contina;lkjdfaksljdf;lajsjdf;asdjfaldsf</div></div>',
});
});
$(".hide-popover").click(function(){
$("button.popover-examples").popover('hide');
});
</script>
here is html element
<td class="popover-examples">
<a data-toggle="popover" href="<?php echo base_url('invoice/edit');?>">
Received Date
</a>
</td>
what should I correct with those above code?
Please help
In your popover setting, the trigger is on hover.
You can change it to "manual", and trigger it using:
$(".popover-examples a").popover("show");
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}