Iframe close button in a portal

[Lucky18]

Hi guys I need some assistance form you...

I have a chatbot in my portal if i click on a imagebutton it opens a chat window which is an Iframe tag.

Now i need to put a cross(X)button to close it .Can anyone help me to acheive this..

Below is my code:

<div class="sample-footer">
<div style="margin-left: 0px;margin-right: 0px;"class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-4">
<img style="color:black !important" title="H Hyper Optimization" src="hex.png" width="15%"/>
<!-- ${Page generated at {{::c.data.time}}} -->
</div>
<div class="col-sm-4" style="text-align:center;font-size: 12px;color:#5B6670;">
<p><b>IT Help Desk</b></p><br/><p>Phone:9100328108 </p><br/><p>Email: ithelp@tmarkins.com</p>
</div>

<div class="col-sm-4" style="text-align:right;font-size: 12px;color:#5B6670;">
<img style="padding-right:60px;" src="tmk.png" height="60" width="150" role="presentation">

<img type="button" class="btn btn-danger btn-lg mdlFire" id="myBtn" ng-click="togglechatclass()" src="chat_icon.png"
height="50" width="50"/>
</div>
</div>

<div id="chatsection" class="HideChat">
<!--<img class="chatclosebutton" src="assets/Images/Close for Add New &amp; View popup.png" title="Close">-->
<iframe id="myFrame" class="ShowIFrameCheckbox" src="{{c.frameurl}}"></iframe>
</div>
</div>

And Css part is below one:

.sample-footer {
background-color: #f0f3f4!important;
color: #5B6670;
padding: 5px;
}
.HideChat{
visibility:hidden;}
.ShowChat{visibility:visible;}
.ShowIFrameCheckbox{
position: fixed;
top: 159px;
right: 19px !important;
height: 420px !important;
width: 300px !important;
}

p{overflow:hidden; white-space: nowrap;display:inline}

This is my code its working but i want a close button to this chat bot..Please help e from this

Thanks In advance!

[Ankur Bawiskar]

Hi Lucy,

you can add this html tag which will show close button and when clicked will close the iframe; try this and check

<input type="button" id="close" onclick="window.close()" value="Close Button">Close Button</input>

Mark Correct if this solves your issue and also mark Helpful if you find my response worthy based on the impact.
Thanks
Ankur

[Lucky18]

No buddy its now working it should be insisde or on border of my popup chat bot.

It is coming at the end of the portal and its closing the whole window or tab in my browser