Need script correction for close button on modal widget

[Andre Jones]

Hello,

I need help with HTML and Client script on my widget modal. I need an HTML code for an (x) close button to be at the top right-hand corner above the scroll bar and I need it to be able to close when someone pushes it. No CSS. What I have isn't working. 

Here are some screen shots of my HTML code 

body>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<div class="container">
<div class="prvcyact">
<p>Privacy Act Statement and Security </p>
</div>
<br></br>
<br></br>
<div class="content">
<p><strong>Chestnut Hill:</strong> is an affluent New England village located six miles (9.7 km) west of downtown Boston, Massachusetts, United States. Like all Massachusetts villages, Chestnut Hill includes portions of multiple municipalities: Brookline, Newton, and Boston via the neighborhood of Brighton. Chestnut Hill's borders are defined by the 02467 ZIP Code.[1] The name refers to several small hills that overlook the 135-acre (546,000 m2) Chestnut Hill Reservoir rather than one particular hill. Chestnut Hill is best known as the home of Boston College and as part of the Boston Marathon route.</p>
<p><strong>Hammond Pond Reservation:</strong> an extensive forest preserve and protected wetlands,[2] goes through Chestnut Hill and Newton where it is also known as Webster Woods.[3]The Kennard Park and Conservation Area is a post-agricultural forest grown up on 19th century farmland. The mixed and conifer woodlands reveal colonial stone walls, a red maple swamp with century-old trees, and a sensitive fern marsh.[4] </p>
<br/><br/>
If deceased has no spouse, children, representative of minor children, or an executor or personal representative named in the deceased's will, then records collected may be shared/released to the primary next of kin (PNOK) family member(s) to aid in the settlement of the member's estate. The DoD 'Blanket Routine Uses' set forth at the beginning of the Office of the Secretary of Defense compilation of systems of records notices may apply to this system.
<br/><br/>
The tanneries that lined Peabody's "Ottoman Street" remained a linchpin of the city's economy into the second half of the 20th century. The tanneries have since closed or been relocated elsewhere, but the city remains known locally as the Leather City or Tanner City. The mascot of Peabody Veterans Memorial High School is named the Tanners.</p>
<p><strong>Disclosure:</strong> Voluntary; however, failure to provide accurate personal identifier information and other solicited information will delay notification and the processing of benefits to designated beneficiaries if applicable.</p>

<div class="contentSection">
<h2>Agency Disclosure Notice</h2>
<p>Chestnut Hill is served by three branches of the Green Line of the MBTA, Boston's light rail system. Stations include:
<ul class="disclosure">
<li>population was 54,481</li>
<li>total area of 16.8 square miles</li>
</ul>
<p>The public reporting burden for this collection of information, 0704-0553, is estimated to average 5 minutes per response, including the time for reviewing instructions, searching existing data sources, gathering and maintaining the data needed, and completing and reviewing the collection of information.
<ul class="disclosure">

my Client controller

function ($uibModal, $scope, glideUserSession) {
var c = this;

c.modalInstance = $uibModal.open({
templateUrl: 'prvcyAct',
scope: $scope
})

c.closeModal = function() {
c.modalInstance.close();
}
}

Screenshot

[KrishnaMohan]

Hi @Andre Jones 

so here you are not using css and dom operations also. I have updated your code without adding css and dom, if user click on X then all content will not be the visible.

If this helps, please mark this as correct/helpful.

Thanks,

Krishnamohan

[Andre Jones]

@KrishnaMohan 

Thank you but it's still working. My code had to be revised to work with uipage. Here it is now.

<script type="text/ng-template" id="privacyActStatement">
<div id="OuterContainer" class="modals">
<div class="group-12">
<div class="header">
<h1>Privacy Act Statement and Security</h1>
<br></br>
<br></br>
<div class="content">
<p><strong>Chestnut Hill:</strong> is an affluent New England village located six miles (9.7 km) west of downtown Boston, Massachusetts, United States. Like all Massachusetts villages, Chestnut Hill includes portions of multiple municipalities: Brookline, Newton, and Boston via the neighborhood of Brighton. Chestnut Hill's borders are defined by the 02467 ZIP Code.[1] The name refers to several small hills that overlook the 135-acre (546,000 m2) Chestnut Hill Reservoir rather than one particular hill. Chestnut Hill is best known as the home of Boston College and as part of the Boston Marathon route.</p>
<p><strong>Hammond Pond Reservation:</strong> an extensive forest preserve and protected wetlands,[2] goes through Chestnut Hill and Newton where it is also known as Webster Woods.[3]The Kennard Park and Conservation Area is a post-agricultural forest grown up on 19th century farmland. The mixed and conifer woodlands reveal colonial stone walls, a red maple swamp with century-old trees, and a sensitive fern marsh.[4] </p>
<br/><br/>
If deceased has no spouse, children, representative of minor children, or an executor or personal representative named in the deceased's will, then records collected may be shared/released to the primary next of kin (PNOK) family member(s) to aid in the settlement of the member's estate. The DoD 'Blanket Routine Uses' set forth at the beginning of the Office of the Secretary of Defense compilation of systems of records notices may apply to this system.
<br/><br/>
The tanneries that lined Peabody's "Ottoman Street" remained a linchpin of the city's economy into the second half of the 20th century. The tanneries have since closed or been relocated elsewhere, but the city remains known locally as the Leather City or Tanner City. The mascot of Peabody Veterans Memorial High School is named the Tanners.</p>
<p><strong>Disclosure:</strong> Voluntary; however, failure to provide accurate personal identifier information and other solicited information will delay notification and the processing of benefits to designated beneficiaries if applicable.</p>

<div class="contentSection">
<h2>Agency Disclosure Notice</h2>
<p>Chestnut Hill is served by three branches of the Green Line of the MBTA, Boston's light rail system. Stations include:
<ul class="disclosure">
<li>population was 54,481</li>
<li>total area of 16.8 square miles</li>
</ul>
<p>The public reporting burden for this collection of information, 0704-0553, is estimated to average 5 minutes per response, including the time for reviewing instructions, searching existing data sources, gathering and maintaining the data needed, and completing and reviewing the collection of information.
<ul class="disclosure">

Client Controller: Is some of this necessary in the controller?

function ($uibModal, $scope, glideUserSession) {
var c = this;
c.visible=true;

c.modalInstance = $uibModal.open({
templateUrl: 'privacyActStatment',
scope: $scope
})

c.closeModal = function() {
c.modalInstance.close();
}

c.close = function(){
c.visible=true;
}
}

[KrishnaMohan · Accepted solution]

Hi @Andre Jones 

 In your code you have missed some tags to close and aslo I have updated code.Please try below code.
In html code

<div>
<button class="btn btn-primary" ng-click="c.openModal()">${Privacy Act Statement and Security}</button>
</div>

<script type="text/ng-template" id="privacyActStatment">
<div id="OuterContainer" class="modals">
<button class="btn btn-primary" ng-click="c.closeModal()">&times;</button>
<div class="group-12">
<div class="header">
<h1>Privacy Act Statement and Security</h1>
<br></br>
<br></br>
<div class="content">
<p><strong>Chestnut Hill:</strong> is an affluent New England village located six miles (9.7 km) west of downtown Boston, Massachusetts, United States. Like all Massachusetts villages, Chestnut Hill includes portions of multiple municipalities: Brookline, Newton, and Boston via the neighborhood of Brighton. Chestnut Hill's borders are defined by the 02467 ZIP Code.[1] The name refers to several small hills that overlook the 135-acre (546,000 m2) Chestnut Hill Reservoir rather than one particular hill. Chestnut Hill is best known as the home of Boston College and as part of the Boston Marathon route.</p>
<p><strong>Hammond Pond Reservation:</strong> an extensive forest preserve and protected wetlands,[2] goes through Chestnut Hill and Newton where it is also known as Webster Woods.[3]The Kennard Park and Conservation Area is a post-agricultural forest grown up on 19th century farmland. The mixed and conifer woodlands reveal colonial stone walls, a red maple swamp with century-old trees, and a sensitive fern marsh.[4] </p>
<br/><br/>
If deceased has no spouse, children, representative of minor children, or an executor or personal representative named in the deceased's will, then records collected may be shared/released to the primary next of kin (PNOK) family member(s) to aid in the settlement of the member's estate. The DoD 'Blanket Routine Uses' set forth at the beginning of the Office of the Secretary of Defense compilation of systems of records notices may apply to this system.
<br/><br/>
The tanneries that lined Peabody's "Ottoman Street" remained a linchpin of the city's economy into the second half of the 20th century. The tanneries have since closed or been relocated elsewhere, but the city remains known locally as the Leather City or Tanner City. The mascot of Peabody Veterans Memorial High School is named the Tanners.</p>
<p><strong>Disclosure:</strong> Voluntary; however, failure to provide accurate personal identifier information and other solicited information will delay notification and the processing of benefits to designated beneficiaries if applicable.</p>

<div class="contentSection">
<h2>Agency Disclosure Notice</h2>
<p>Chestnut Hill is served by three branches of the Green Line of the MBTA, Boston's light rail system. Stations include:
<ul class="disclosure">
<li>population was 54,481</li>
<li>total area of 16.8 square miles</li>
</ul>
<p>The public reporting burden for this collection of information, 0704-0553, is estimated to average 5 minutes per response, including the time for reviewing instructions, searching existing data sources, gathering and maintaining the data needed, and completing and reviewing the collection of information.
<ul class="disclosure">
</script>

In client Script

 
function($uibModal, $scope) {
var c = this;

c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'privacyActStatment',
scope: $scope
});
}

c.closeModal = function() {
c.modalInstance.close();
}

}

If this helps, please mark this as correct/helpful.

Thanks,

Krishnamohan

[Andre Jones]

Thank you