How to make a cross close sign in popup

Question

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below enter image description here

The code I have used is

("jsfiddle.net/sGeVT/10/")

this script code is an example of my code I have further modified it but the basic of the popup is same. Hope you understand and can give solution.

see my updated answer. The last link will show you how to do it without images. — AmmarCSE, Apr 23 '15 at 19:07
possible duplicate of [How can I make a redirect page using jQuery?](http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery) — learner, Apr 24 '15 at 12:13

Stickers · Accepted Answer · 2015-04-23T21:38:43.013

(1) Add a span with a x inside, × the best looking one IMO.

<span class="deleteMeetingClose">&times;</span>

(2) Set up some styles for it.

.deleteMeetingClose {
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}

(3) Add it to the jQuery code along with other close triggers.

$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
    //close action
});

Updated demo: http://jsfiddle.net/zj0yL9me/

$('.deleteMeeting').click(function () {
    $('#overlay').fadeIn('slow');
    $('#popupBox').fadeIn('slow');
    $('#popupContent').fadeIn('slow');
});

// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
    $('#overlay').fadeOut('slow');
    $('#popupBox').fadeOut('slow');
    $('#popupContent').fadeOut('slow');
});

$('.deleteMeetingButton').click(function () {
    $('#popupContent').fadeOut('slow');
    $('#deleteMeetingConfirmDeleted').fadeIn('slow');
    $('#overlay').delay(1300).fadeOut('slow');
    $('#popupBox').delay(1300).fadeOut('slow');
    $('#deleteMeetingConfirmDeleted').fadeOut('slow');
});

#overlay {
    display:none;
    opacity:0.5;
    background-color:black;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 999;
}
#popupBox {
    display:none;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:600px;
    height: 500px;
    color: #000000;
    border:5px solid #4E93A2;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:#FFFFFF;
    z-index: 1000;
}
#popupContent {
    display:none;
    font-family:Arial, Helvetica, sans-serif;
    color: #4E93A2;
    margin-top:30px;
    margin-left:30px;
    margin-right:30px;
}
.deleteMeetingButton {
    clear:both;
    cursor:pointer;
    width:90px;
    height:30px;
    border-radius: 4px;
    background-color: #5CD2D2;
    border:none;
    text-align:center;
    line-height:10px;
    color:#FFFFFF;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
}
.deleteMeetingCancel {
    clear:both;
    cursor:pointer;
    width:90px;
    height:30px;
    border-radius: 4px;
    background-color: #5CD2D2;
    border:none;
    text-align:center;
    line-height:10px;
    color:#FFFFFF;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    content:"XXXX";
}
#deleteMeetingConfirmDeleted {
    display:none;
}
/* added code below */
.deleteMeetingClose {
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
    <button class="deleteMeeting">Delete</button>
</div>

<div id="overlay"></div>

<div id="popupBox">
    <div id="popupContent">
        <i>Are you sure you want to delete this meeting?</i>
        <br />
        <span style="text-align:center;color:black;font-size:40px;">YO</span>
        <br />
        <button class="deleteMeetingButton">Delete</button>
        <button class="deleteMeetingCancel">Cancel</button>
    </div>
    <div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
    <span class="deleteMeetingClose">&times;</span> <!-- <= added this line -->
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

First, put in image element in your popup div

<img id="ClosePopup"  src="insert-image-url-here"/>

Then, style it with position:absolute. Also, make sure the popup div has position:relative

#ClosePopup{
 position: absolute;
 right:0px;
}

Finally, attach your click handler

$('#ClosePopup').click(function(){
   $('#overlay,#popupBox,#popupContent').fadeOut('slow');
});

See it working in this fiddle

If you want a pure css solution without images, see Pure css close button

edited May 23 '17 at 12:07

Community

1
1

answered Apr 23 '15 at 19:01

AmmarCSE

30,079
5
45
53

I want to do it without putting image and without writing a text and align it to right – learner Apr 23 '15 at 19:04

score 0 · Answer 3 · answered Apr 23 '15 at 19:16

Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:

HTML

<span class="cancel-icon" >×</span>

CSS:

.cancel-icon{
    float:right; 
    cursor:pointer;
}

JS

$('.cancel-icon').click(function () {
    //Close the popup  
});

Using your Fiddle: http://jsfiddle.net/sGeVT/118/

How to make a cross close sign in popup

3 Answers3

HTML

CSS:

JS