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模态窗口

回答

相关问题