Question

使用的脚本

PHP脚本

<?php
    $files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
    echo '<div class="SwitchPages"><div class="WrapPages">'; //First tab
    $t = 0;
    for ($i=0; $i<count($files); $i++)
    {
        $root = "http://www.rafflebananza.com/";
        $imagePath = str_replace("../", "",$files[$i]);
        $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
        $imageName = str_replace("Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);

        if( $i % 8 == 0 ) {
            $t = $t + 1;
            echo '<div id="Page_'.$t.'_Content" class="Pages">'; //hidden class
        }

        echo '<div class="UploadedImgs">
                <div class="ImgName">'.$imageName.'</div>
                <div class="IMG">
                    <img src="'.$root.$imagePath.'" alt="'.$imageName.'" />
                </div>
            </div>';

        if( $i > 0 && $i % 7 == 0 && $i != count($files) - 1 ) {
            echo '</div>';
        }
        if( $i % 7 == 0 && $i == count($files) - 1 ) {
            echo '</div>';
        } else if($i == count($files) - 1 && $i % 7 != 0 ) {
            echo "</div></div>";
        }
    }
    $t = 1;
    echo '<div class="TabSwitcher">';
    for ($i=0; $i<count($files); $i++)
    {
        if( $i % 8 == 0 ) {
            echo '<div class="Tab" id="Page_'.$t.'">'.$t.'</div>';
            $t = $t + 1;
        }
    }
    echo '</div></div>';
?>

点击显示...

$('.modal_2').modal_box({
    title:'Second Title Box',
    description:'<?php $a=glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");echo '<div class="SwitchPages"><div class="WrapPages">';$b=0;for($c=0;$c<count($a);$c++){$d="http://www.rafflebananza.com/";$e=str_replace("../","",$a[$c]);$f=preg_replace('/\\.[^.\\s]{3,4}$/','',$e);$g=str_replace("Desktop/IMG/BananzaNews/Thumbs/","",$f);if($c%8==0){$b=$b+1;echo '<div id="Page_'.$b.'_Content" class="Pages">';}echo '<div class="UploadedImgs"><div class="ImgName">'.$g.'</div><div class="IMG"><img src="'.$d.$e.'" alt="'.$g.'" /></div></div>';if($c>0&&$c%7==0&&$c!=count($a)-1){echo '</div>';}if($c%7==0&&$c==count($a)-1){echo '</div>';}else if($c==count($a)-1&&$c%7!=0){echo "</div></div>";}}$b=1;echo '<div class="TabSwitcher">';for($c=0;$c<count($a);$c++){if($c%8==0){echo '<div class="Tab" id="Page_'.$b.'">'.$b.'</div>';$b=$b+1;}}echo '</div></div>';?>'
});

JQuery的

var width = 0;  //you original issue, initialize it with a start value
var tabs = $('.TabSwitcher .Tab'); //store it do not look it up over and over
var numOfTabs = tabs.length;

tabs.each( function() {  //use each to loop
    width = width + $(this).width();  //"this" is the current tab
});

width = width + (numOfTabs * 10) // Add padding
$('.TabSwitcher').css({'width': width + 'px'});

$('.Pages .UploadedImgs').click(function(e) {
    url = $(this).children(".IMG").find("img").attr("src");
    $('#file').text(url);
    $("#server_img").val(url);
});

$('.TabSwitcher .Tab:first-child').addClass('Active');
$('.TabSwitcher .Tab').click(function() {
    if (!$(this).hasClass('Active')) {
        show = '#' + $(this).attr('id') + '_Content';
        $('.TabSwitcher .Tab').removeClass('Active');
        $(this).addClass('Active');
        $('.WrapPages .Pages').hide();
        $(show).show();
    }
});

问题

请不要困惑，这不是PHP问题。我的PHP创建的内容完全有效 IF 它不在我的模态框中，但是如果脚本在我的模态中，它不起作用，我的意思是它确实显示了诸如此类的东西，只是切换标签的功能以及什么不起作用。

据推测，这是因为在加载时我的模态不可见，因此我可能需要知道如何在隐藏的东西或调用它时执行所有JQuery脚本。

完整模态脚本

(function($){

    // Defining our jQuery plugin
    $.fn.modal_box = function(prop){

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40];

        function preventDefault(e) {
          e = e || window.event;
          if (e.preventDefault)
              e.preventDefault();
          e.returnValue = false;  
        }

        function keydown(e) {
            for (var i = keys.length; i--;) {
                if (e.keyCode === keys[i]) {
                    preventDefault(e);
                    return;
                }
            }
        }

        function wheel(e) {
          preventDefault(e);
        }

        function disable_scroll() {
          if (window.addEventListener) {
              window.addEventListener('DOMMouseScroll', wheel, false);
          }
          window.onmousewheel = document.onmousewheel = wheel;
          document.onkeydown = keydown;
        }

        function enable_scroll() {
            if (window.removeEventListener) {
                window.removeEventListener('DOMMouseScroll', wheel, false);
            }
            window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
        }

        var options = $.extend({
            height : "500",
            width : "800",
        },prop);

        var from_top;
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();

        return this.click(function(e){
            scrollbar = $(window).scrollTop();
            from_top = scrollbar + ((windowHeight / 2) -250);
            e.preventDefault();
            disable_scroll();
            add_block_page();
            add_popup_box();
            add_styles();
            $('.modal_box').fadeIn();
        });

         function add_styles(){         
            $('.modal_box').css({ 
                'position':'absolute', 
                'left':(windowWidth /2)-400 + 'px',
                'top': from_top,
                'display':'none',
                'margin':'10px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2', 
                'z-index':'50',
                'overflow':'hidden'
            });
            $('.modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
            /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.inner_modal_box').css({
                'background-color':'#fff',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
            });
        }

         function add_block_page(){
            var block_page = $('<div class="block_page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="modal_box"><a href="#" class="modal_close"></a><div class="inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.block_page');

             $('.modal_close').click(function(){
                event.preventDefault();
                $(this).parent().fadeOut().remove();
                $('.block_page').fadeOut().remove();                 
             });
        }

        return this;
    };

})(jQuery);

JSFiddle http://jsfiddle.net/3gu97cxn/

Answer 1

像

这样的功能

$('.TabSwitcher .Tab').click(function() {..

不适用于模态因为事件只能附加（至少，像这样）到加载页面时实际在DOM中的元素，.Tabswitcher是你的模态的一部分以后会附加到身体上您可以使用on()将事件从已经在DOM中的父元素委托给稍后添加的.Tab元素，如下所示：

$(document).on("click", $('.TabSwitcher .Tab'), function(){...});

而不是$(document)可以使用DOM中已有的任何父元素来委派事件。

作为参考，您可以查看http://api.jquery.com/on/

相关部分，“直接和委托事件”部分：

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。

JQuery不在modal中工作

使用的脚本

问题

1 个答案: