We help IT Professionals succeed at work.

Popup at the button click

Sandy V
Sandy V asked
on
Medium Priority
107 Views
Last Modified: 2019-10-18
I am trying to create a popup when a user clicks the save button & that should have 2 options (Yes or No button). Popup should look similar to below screenshot.

I am using html & angularJS in my web application. How do i achieve this?

popup.jpg
Comment
Watch Question

CERTIFIED EXPERT

Commented:
You can add any html element inside the popper container

Here is an example with Bootstrap
http://jsfiddle.net/lenamtl/qpv0huy4/


you can use something like this
$element.popover({
        animation: false,
        html: true,
        sanitize: false,
        placement: 'bottom',
        trigger: 'manual',
        content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
    });

Open in new window


Using tippy you can add content https://atomiks.github.io/tippyjs/#html-content
Sandy VDeveloper

Author

Commented:
Thanks for your help. Here is the code that i started implementing in my application but doesn't seem to work.

    <button popover-template="'popover.html'"
                popover-placement="top"
                popover-trigger="click"
                type="button"
                class="btn btn-default">Mouse over me</button>

Open in new window


I have included 'ngAnimate' & 'ui.bootstrap' as dependencies in my AngularJS application. I also included following js file on the page that includes ng-app directive

       
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script> 

Open in new window


It doesn't create any error message but popup doesn't show.
CERTIFIED EXPERT

Commented:
Hi,

You cannot display .html page like this with a url
popover-template="'popover.html'"

Open in new window

or please refer to the script you are using...

You need to put the HTML into data-content
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

Open in new window


https://getbootstrap.com/docs/4.1/components/popovers/#example

or
You need to put the HTML into content
$element.popover({
        animation: false,
        html: true,
        sanitize: false,
        placement: 'bottom',
        trigger: 'manual',
        content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
    });

Open in new window

Sandy VDeveloper

Author

Commented:
I was able to successfully display html page in a test application but when i do the same in the current application nothing seems to work. The reason i included  code in a separate file is because i have lot of html code that needs to be displayed in popover & felt template is a better option as it makes the code readable.
CERTIFIED EXPERT
Commented:
Hi,

1) Which script are you using for the popover? Please provide the link because I never saw on that allow to display html file  / URL as a template.
2) Check error in the console using Chrome right click / inspect, keep this open during your tests so you can see the errors.
3) Try using content or data-content which is the way it is usually done.
Sandy VDeveloper

Author

Commented:
I used data-content instead of popover-template as suggested by lenamtl