0

我有一张图片，我想在不同的窗口中打开它，而不是标签窗口。例如 jqm 对话框，有没有人知道如何做到这一点以及具有诸如弹出窗口之类的事务效果

这是一个示例html

        <a id="parispop" href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="images/paris.jpg" alt="Paris, France" style="width:30%"></a>
    <a id="sydnypop" href="#popupSydney" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="images/sydney.jpg" alt="Sydney, Australia" style="width:30%"></a>
    <a id="newyorkpop" href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="images/newyork.jpg" alt="New York, USA" style="width:30%"></a>

如果是 jquery 那就太好了（jquery mobile）

请忽略弹出代码

4

3 回答 3

1

请检查我创建的 jsFiddle。它使用 jQuery 1.8.3 和 jQuery Mobile 1.2.0。

HTML 代码

<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page</h1></div> 

    <div  data-role="content" id="imageLists">
        <a href="#view_image" data-role="button"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/297px-Cat_poster_2.jpg" /></a>
    </div> 
    <div  data-role="footer"><h4>Footer</h4></div> 
</div> 


<div data-role="dialog" id="view_image">
    <div  data-role="header" data-rel="back"><h1>Image Container Popup</h1></div>
    <div  data-role="content">
        <p id="image_container"></p>
    </div>
</div>

Javascript：

下面的代码检查用户单击的项目的“src”的值，然后将其写入#image_container。

$(function(){
    $('#imageLists > a').on('click',function(){
        var _img = $(this).find('img').attr('src');
        $('#image_container').html('<img src="'+_img+'"/>');
    });
});

jsFiddle 链接：http: //jsfiddle.net/dARNs/

于 2013-07-23T07:02:37.467 回答
1

您可以使用window.open功能。我通常用它来打开弹出窗口。

于 2013-07-23T06:35:42.730 回答
0

工作示例：http: //jsfiddle.net/Gajotres/MU26F/

这是您的请求的变体。在此示例中，图像在一个页面上排序，单击它将显示在另一个页面中。选择的页面转换是弹出的。如果在查看器关闭后动态创建和删除第二个页面，则此示例甚至可以更小。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content" id="galery-content">
                <a id="parispop" href="#"><img class="popphoto" src="http://www.glsvlsi.org/paris_pic.jpg" alt="Paris, France" style="width:30%"/></a>
                <a id="sydnypop" href="#"><img class="popphoto" src="http://sydneylivingtoday.com/public/admin/Sydney-australia.jpg" alt="Sydney, Australia" style="width:30%"/></a>
                <a id="newyorkpop" href="#popupNYC"><img class="popphoto" src="http://www.burgessyachts.com/media/adminforms/locations/n/e/new_york_1.jpg" alt="New York, USA" style="width:30%"/></a>
            </div>
        </div>
        <div data-role="page" id="galery">
            <div data-theme="b" data-role="header">
                <a href="#index" class="ui-btn-left">Back</a>                
                <h1>Viewer</h1>
            </div>

            <div data-role="content" id="image-content">
                <img src="" width="100%" height="auto"/>
            </div>
        </div>          
    </body>
</html>

Javascript：

$(document).on('pageinit', '#index', function(){ 
    $(document).on('click', '#galery-content a', function(){ 
        $('#image-content img').attr('src',$(this).find('img').attr('src'));
        $.mobile.changePage( "#galery", { transition: "pop", changeHash: false });
    });
});

CSS：

#image-content {
    position: absolute !important;
    top: 40px !important;
    left:0 !important;
    bottom:0 !important;
    right:0 !important;
}
于 2013-07-23T08:29:43.977 回答