加載多個模態動態

我有我的index.php頁面是一個jQuery模式對話框（默認爲隱藏）加載多個模態動態

我再有這樣的功能，顯示模式，並填滿它的標題和內容的HTML。

當我打電話給它時，它將取代模式中以前的任何內容，因爲它具有相同的ID。

有沒有一種方法，我可以動態創建模態顯示多個一切的背後相互

function LoadModalBody(content, title) { 
    title = title || ''; 

    $("#modal_page").fadeIn("slow"); 
    $("#modal_title").html(title); 

    $("#modal_close_button").click(function(){ CloseModal(); }); 

    $("#modal_page_body").html(content); 

    //$("html, body").animate({ scrollTop: 0 }, "slow"); 
}

功能關閉模式是這樣的：

function CloseModal(reloadflag) { 
    reloadflag = reloadflag || ''; 

    $("#modal_page").fadeOut(); 

    if(reloadflag === 'Y') { 
     location.reload(); 
    } 
}

我想創建一個ID的對於功能裏面的每一個模式，所以他們是獨一無二的，並顯示每一個這種方式，但我不太確定這是最好的方式

來源

2017-07-19 charlie

最好的方法是適合你的任何東西。如果您的容器沒有更改，但內容確實存在，請嘗試在容器 – bowl0stu

問題是，.html()覆蓋所有的模態內容，所以當使用這個函數時，它會刪除模態的所有以前的html內容，並將其替換爲.html()上傳遞的最新字段。

您可以使用.append()而不是.html()。

有一個簡單的例子來說明如何在模態對話框中動態添加字段。

function openDialog(titleDialog,content){ 
 
    $("#dialog").dialog({ 
 
    height: 520, 
 
    width: 400, 
 
    modal: true, 
 
    title: titleDialog, 
 
    
 
    open: function() { 
 
     \t $(this).append(content); 
 
      $("#testDiv").css("display","block"); 
 
     }, 
 
     buttons: { 
 
      Cancel: function() { 
 
       $(this).dialog("close"); 
 
      }, 
 
     \t Save:function(){ 
 
     \t \t 
 
     \t } 
 
     } 
 
    
 
    }); 
 
    } 
 
    
 
    $("#openDialog").on('click',function(){ 
 
    
 
    \t openDialog("some title",$("#testDiv")); 
 
    });

#testDiv{ 
 
    height:100px; 
 
    width:100px; 
 
    border: solid 2px; 
 
    display:none; 
 
} 
 

 
#dialog{ 
 
    border:solid 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 

 
<div id="dialog"> 
 
</div> 
 

 
<button id="openDialog"> 
 
click to open 
 
</button> 
 

 
<div id="testDiv"> 
 

 
</div>

來源

2017-07-19 16:32:20

中添加多個隱藏的內容面板，如果我們追加，這是否會添加到現有模式？我希望能夠打開彼此重疊的多個模態。所以，當一個人關閉它會顯示下一個它 – charlie

好吧，我明白，你想添加多個領域的單一模態。我會尋找解脫，並告訴你，如果我找到了一切 –

您可以創建一個對話框容器內的一些對話HTML模式，然後創建一個將基於該模式，當然裏面有你的內容創建新的對話框的功能：

HTML

<div id="dialogs"> 
<div class="dialog-tmpl"> 
    <div class="dialog-body"></div> 
</div> 
</div>

CSS

.dialogs { 
    display:none; 
}

var createNewDialog = (title, body) => { 
    var $newDialog = $('#dialogs .dialog-tmpl').clone(); 
    $('.dialog-body', $newDialog).html(body); 
    $('#dialogs').append($newDialog); 
    $newDialog.dialog({ 
     'title': title 
    }); 
    return $newDialog; 
};

現在，當你想打開一個新的對話框，你只需要調用與參數此功能，你得到了一個新的對話框：

$('#open-dialog').on('click', function(e) { 
    var $dlg = createNewDialog('Dialog title', '<h3>Some HTML content</h3>'); 
});

您將創建由該函數返回的新對話框，以便您可以進一步操作對話框彈出窗口。例如，如果你想關閉對話框，你現在可以使用JavaScript變量與createNewDialog這樣返回的對話框：

$dlg.dialog('close');

當然，你必須管理你將如何保存對話框等等你可以通過你的所有代碼訪問它們。有很多方法可以控制動態元素，您甚至可以爲每個對話框分配唯一的ID，並在需要時使用它。

您可以在這裏找到了工作示例：http://zikro.gr/dbg/html/jq-modal.html

來源

2017-08-08 08:44:23

你可以保持您的面板代碼在一個字符串變量您LoadModalBody函數中，並保持全球modal_id變量爲一個唯一的ID分配給每個你的情態動詞則模態附加到父元素：

var _modal_id = 1; 
function LoadModalBody(content, title) { 
    var div = "<div id='modal" + _modal_id + "' class='mymodal'>" + 
    // elements in your modal + 
    + "</div>"; 
    $("#modal_parent_element").append(div); 

    // other parts of the function 
}

您可以使用.mymodal類關閉所有或者使用每個id來關閉特定的模式。

來源

2017-08-14 21:03:13

加載多個模態動態

回答

相關問題