0

我有一个脚本，该脚本具有多个 jquery 弹出框。它通过字符串和 ID 获取 div。这是Javascript...

function POPUP(string,id){

var closebtn = '<img src="i/JqueryClose.png" onClick="CLOSEPOP('+id+')" title="Close"     class="close">';
$('closebtn'+id).css('{margin: -30px -30px 0 0}');
$('#Popup'+id).html(closebtn+id);
$('#Popup'+id).fadeIn(300);
onLoad: true;
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();  
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});    
//transition effect     
$('#mask').fadeIn(300);    
$('#mask').fadeTo("slow",0.8);          

}
function CLOSEPOP(id){
$('#Popup'+id).html('');
$('#Popup'+id).fadeOut(300); 
$('#mask').fadeOut(300);
}       
//if mask is clicked
$('#mask').click(function () {
$(this).fadeOut(300);
$('.VPopWin').fadeOut(300);
});

现在这里是 HTML onclick 和一个 div。

<td class="BroadcastText" onClick="POPUP('Popup',1)">Broadcast 1 Message</td>
<div id="Popup1" class="VPopWin">

弹出功能有效，但是当我单击“广播 1 消息”时，该框仅显示 div id，在这种情况下为 1。如果单击 div id="Popup2"，则显示 2。如何解决此问题以显示内容在里面我有而不是ID？

4

1 回答 1

0

我更改了您的代码以使其正常工作：

HTML：

<table>
    <tr>
        <td data-message="test string" class="BroadcastText">Broadcast 1 Message</td>
    </tr>
</table>

CSS：

#mask {
    z-index: 1000;
    display: none;
    position: fixed;
    background-color: black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.popup {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 10001;
    color: white;
}

JS：

$(function () {
    var body = $('body'),
        $document = $(document),
        $window = $(window);
    var closebtn = $('<img src="i/JqueryClose.png" title="Close"     class="close">');
    closebtn.css('{margin: -30px -30px 0 0}');
    var mask = $('<div id="mask">');
    body.append(mask);
    $('.BroadcastText').click(POPUP);


    function POPUP() {
        var string = $(this).data('message');
        var popup = $('<div>').addClass('popup');
        body.append(popup);
        var clbutton = closebtn.clone();
        popup.append(clbutton);
        clbutton.click(CLOSEPOP);
        mask.one('click', CLOSEPOP);
        var poptext = $('<div>').html(string);
        popup.append(poptext);
        popup.fadeIn(300);
        //transition effect     
        mask.fadeIn(300);
        mask.fadeTo("slow", 0.8);

        function CLOSEPOP() {
            popup.fadeOut(300, function () {
                popup.remove();
            });
            mask.fadeOut(300);
        }
    }
});

演示

于 2013-01-25T22:24:47.827 回答