Question

我有一个图像，我想在另一个窗口打开它不是一个标签窗口。比如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）

请忽略弹出代码

Answer 1

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

Answer 2

请检查我创建的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 Link： http://jsfiddle.net/dARNs/

Answer 3

工作示例：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;
}

在转换的不同窗口中打开图像

3 个答案: