如何在弹出窗口中进行交叉密切签名

Question

我使用了一个弹出式脚本，使弹出出现在我的屏幕上，当我打开我的html文件，现在我想在弹出屏幕上的右上角关闭注册类似下图所示的图片

我使用的代码是

（＆＃34; jsfiddle.net/sGeVT/10 /＆＃34）

这个脚本代码是我的代码的一个例子，我已经进一步修改了它，但弹出窗口的基本内容是相同的。 希望你理解，并能给出解决方案。

Answer 1

首先，在弹出式div中放入image元素

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

然后，使用position:absolute设置样式。另外，请确保弹出式div具有position:relative

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

最后，附上您的点击处理程序

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

请参阅此fiddle

如果你想要一个没有图像的纯css解决方案，请参阅 Pure css close button

Answer 2

只需为x创建一个包含span字符的×元素，放置一些样式并将click事件绑定到弹出关闭操作：

HTML

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

CSS：

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

JS

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

使用你的小提琴：http://jsfiddle.net/sGeVT/118/

Answer 3

（1）添加一个内部x的范围，×最好看的IMO。

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

（2）为它设置一些样式。

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

（3）将其与其他关闭触发器一起添加到jQuery代码中。

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

更新了演示： http://jsfiddle.net/zj0yL9me/

＆＃13;

＆＃13;

$('.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');
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;