在asp.net中的页面加载时显示引导模式

时间:2018-12-13 08:49:22

标签: asp.net bootstrap-modal

我是asp.net的新手。我想在页面中的页面加载上显示一个简单的引导模式。该应用程序是用asp.net编写的。我像在php中一样编写了代码,以显示模式:

<script type="text/javascript">
$(window).load(function () {
$('#myModal').modal('show');
});
</script>

模式

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

但是它不起作用..我知道我们在asp.net中编码的方式不同于php。由于我不了解.net中的概念,因此无法完成此工作。  谁能帮我。.

1 个答案:

答案 0 :(得分:1)

仅缺少id。刚刚在您的html中添加了id="myModal",就可以了。

如果仍然无法使用,请检查是否包含jquery。然后检查bootstrap。请注意,jquery必须出现在bootstrap之前。

您可以在下面的代码中查看工作示例,其中仅将id添加到您的代码中。

$(window).load(function() {
  $('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>