Question

我有一個網址：

<a onClick="showDialog({$product['id']});">More Info...</a> 

另外，我有：

function showDialog(productID) 
{ 
    $("#dialog-modal_"+productID).html("<iframe src='index.php?act=showProduct&amp;id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>"); 
    $("#dialog-modal_"+productID).dialog({ 
    width: 810, 
    height: 590, 
    resizable: false, 
    modal: true, 
    open: function(event, ui) 
    { 
     event.preventDefault(); 
    } 
    }); 
    container 
     .dialog('option', 'title', 'Your Title') 
     .dialog('option', 'buttons', { 
      Close: function() { 
       $(this).dialog('close'); 
      } 
     }) 
     .dialog('open'); 

    var stateObj = { foo: "bar" }; 
    window.history.pushState(stateObj, "page 2", "{$info['siteurl']}/index.html#product-"+productID); 

} 

，如果我打開它，一旦它的工作，但如果我再一次嘗試，它是不開放。 我需要找到一種方法來「清除」當前ID的最後一個對話框。 不同的對話框工作，但只有一次。

Answer 1

產品內部循環：

<a href="javascript:" class="productOpener" data-id="{$product['id']}">more info...</a> 

而JavaScript：

$(".productOpener").click(function() { 
    showDialog($(this).data("id")); 
}); 

並修改showDialog只創建模態的div當你需要它：

function showDialog(productID) { 
    var _modal = $("<div/>"); //add whatever styling you need 
    _modal.html("<iframe src='index.php?act=showProduct&amp;id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>"); 
    _modal.dialog({ ... }); 
    ... 
}