Question

我的标记

<div class="popup bg-white"><!--pop up box begins-->
            <a href="" class="close-btn fr center_text">
                <b class="small-font">X</b>
                <span>CLOSE</span>
            </a>
            <div class="popup-title medium_18 font-bold">Please edit your details below:</div>
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Miss Rachael Short" size="49" />
            </div>  
            <div class="clearfix">
                <input type="text" class="input_box" value="" name="" placeholder="Industrial Way" size="49" />
            </div>  
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Bath" size="49" />
            </div>
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Somerset" size="49" />
            </div>  
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="BA2 8SF" size="49" />
            </div>
            <button class="btn btn-common fr btn-big auto_width" value="submit" type="submit" name="submit">EDIT</button>
        </div><!--pop up box ends-->

按钮<button class="btn btn-common fl btn-myacc auto_width" value="submit" type="submit" name="submit">EDIT</button>

[UPDATE] css .popup { visiblity: hidden }

单击“编辑”按钮时，我需要弹出div popup。

我怎样才能为此获得JS代码？我的网站标题中包含fancybox脚本。

Answer 1

将您的按钮放在弹出式div之外，为弹出式div提供一个唯一ID，为按钮提供一个类，并相应地设置您的fancybox代码。

Demo

HTML

<div id="popupID" class="popup bg-white"><!--pop up box begins-->
        <!-- rest of the html -->    
</div><!--pop up box ends-->

<button class="fancybox btn btn-common fr btn-big auto_width" value="submit" type="submit" name="submit">EDIT</button>

的jQuery

$(".fancybox").fancybox({
    'href' : '#popupID'
});

如何通过使用花式框/灯箱点击提交按钮获得div弹出窗口？

1 个答案: