ASP.NET C＃中的Bootstrap Modal彈出問題

Question

我的引導程序模式popupissue的屏幕截圖

我在這樣的按鈕單擊中調用了該彈出窗口：

     <li>
                <a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label></a>
             </li>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

我不知道為什么會這樣。 我什至無法關閉。

我希望它是這樣的：

在此處輸入圖片說明

Answer 1

您必須在關閉按鈕事件上編寫以下代碼：

$('#myModal').modal('hide');
$('.modal-backdrop').removeClass('modal-backdrop');
$('.fade').removeClass('fade');
$('.in').removeClass('in');
$('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
});

請對觸發按鈕事件使用以下代碼：

$ .ajax（{

        url: '/test/test?id=' + id,
        type: "Post",
        async: false,
        dataType: "html",
        contentType: "application/json;charset=utf-8",
        success: function (result) {  
           //Your div name where you want to show model popup data                 
            $("#YourResultDivName").empty();
            $("#YourResultDivName").html(result);

           //your button click event trigger from here for open model popup
           $("#btnhdnModelPopup").trigger('click'); 

        }
    });

檢查以下HTML代碼以獲取模型彈出窗口：

<form id="ModelPopupForm" class="form-horizontal">
    <button type="button" id="btnhdnModelPopup" style="display: none;" class="btn btn-info btn-lg" data-toggle="modal" data-target="#divModelPopup"></button>
    <div class="modal fade" id="divModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-95" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Model Title</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12">
                           Your Data
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnClose" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</form>

它會完美地工作！

Answer 2

您擁有的代碼可以在我的機器上運行！ 您提供的代碼之外肯定還有另一個問題。 將此代碼粘貼到空白的.html文檔中，然后運行它，然后再試算出它與您之間的區別。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>


 <li>
      <a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label></a>
</li>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>





  </div>

</body>
</html>

ASP.NET C＃中的Bootstrap Modal彈出問題

問題描述

2 個解決方案

解決方案1
0 2016-11-14 10:46:51

解決方案2
0 2016-11-14 10:56:26

ASP.NET C＃中的Bootstrap Modal彈出問題

問題描述

2 個解決方案

解決方案1 0 2016-11-14 10:46:51

解決方案2 0 2016-11-14 10:56:26

解決方案1
0 2016-11-14 10:46:51

解決方案2
0 2016-11-14 10:56:26