Bootstrap模態窗口而不是jQuery模態窗口

我是網絡新手。我寫這jQuery的模態窗口：Bootstrap模態窗口而不是jQuery模態窗口

<div id="dialog" title="Basic dialog" class="modal-body" style="display:none;"> 
    <p>@Html.TextArea("commentForDecline")</p> 
    <button title="Ok" class="btn btn-primary ok-request">Ok</button> 
</div>

，這是我的JavaScript代碼：

function declineButtonClick(th) {  
    tempId = $(th).attr('data-id'); 
    $('#dialog').attr('data-id', tempId); 
    $("#dialog").dialog(); 
} 

$('button.ok-request').click(function() { 
    var tempId = $('#dialog').attr('data-id'); 
    var message = $('textarea#commentForDecline').val(); 
    $.ajax({ 
    type: "POST", 
    url: "/TableRequest/DeclineRequest", 
    data: { 'message': message, 'id': tempId }, 
     success: function (msg) { 
    } 
    }); 
    $("#dialog").dialog('close'); 
    $('button[data-id="' + tempId + '"]') 
    .parent() 
    .parent() 
    .find('div.True') 
    .attr('class', "False"); 

    $('button[data-id="' + tempId + '"]') 
    .parent() 
    .parent() 
    .find('img.decline-img') 
    .show(); 

    $('button[data-id="' + tempId + '"]') 
    .parent() 
    .parent() 
    .find('img.accept-img') 
    .hide(); 

    $('button[data-id="' + tempId + '"]') 
    .parent() 
    .find('button.decline-button') 
    .hide(); 

    $('button[data-id="' + tempId + '"]') 
    .parent() 
    .find('button.accept-button') 
    .show(); 

    $('textarea#commentForDecline').val(''); 
});

我需要把引導模式經典的窗口，而不是我的jQuery的模態窗口。所以我添加了bootstrap類，但沒有任何變化。我知道它應該很簡單，但不能這樣做。誰能幫我？我將非常感激。

來源

2015-05-04 Alexander

你鏈接了'bootstrap'文件嗎？ –

您將需要使用引導程序j來管理模式... 2個腳本不可互換。還需要使用引導標記 – charlietfl

1）當然，我做到了。 2）你能提供任何例子嗎？ – Alexander

確保你已經包括在你查看引導JS（bootstrap.js）

如果您正在打開通過javascript的模式，使用正確的語法：

$("#dialog").modal(//options); 

// within the on-click function 
$("#dialog").modal('show');

如果你打開它通過模式的標記，請使用正確的語法：

<button type="button" class="btn" data-toggle="modal" data-target="#dialog">Click Me</button> 

<div id="dialog" class="modal" role="modal" aria-labelledby="modalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title" id="modalLabel">Basic Dialog</h4> 
     </div> 
     <div class="modal-body"> 
     <p>@Html.TextArea("commentForDecline")</p> 
     <button title="Ok" class="btn btn-primary ok-request">Ok</button> 
     </div> // end of body 
    </div> // end of modal content 
    </div> // end of modal dialog 
</div> // end of modal div

無論您選擇打開你的模式哪種方法，你一定要聲明bootstrap.js腳本以及樣式表。

來源

2015-05-04 15:00:05 Eckert

Bootstrap模態窗口而不是jQuery模態窗口

回答

相關問題