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

ポップアップ機能は機能しますが、[Broadcast 1 Message] をクリックすると、ボックスには 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 に答える