jQuery 用自己的函数打开 Bootstrap 模型

Open Bootstrap Model with own function

提问by Joh

I have an asp.net web application. When I click on my button a modal should be opened this is my button:

我有一个 asp.net 网络应用程序。当我点击我的按钮时，应该打开一个模态，这是我的按钮：

<input type="button" class="mybutton" data-toggle="modal"     data-target="#mymodal" value="Open Model" /> 

This works fine but I would prefer to to it like that:

这很好用，但我更喜欢这样：

<input type="button" class="mybutton" onclick="showModal()" value="Open Model" /> 

with:

和：

function showModal() {
      $('#mymodal').toggle();
  }

but when I do it that way and click on the button the modal doesn′t show up and it is like the whole page freezes. But I don′t get any error warnings. If anyone has an idea I would really appriciate.

但是当我这样做并单击按钮时，模态不会出现，就像整个页面都冻结了一样。但我没有收到任何错误警告。如果有人有想法，我真的会很感激。

回答by Rene Korss

See Bootstrap docs for modal methods.

有关模态方法，请参阅 Bootstrap 文档。

function showModal() {
  $('#myModal').modal('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<input type="button" class="mybutton btn btn-primary" onclick="showModal()" value="Open Model" /> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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="exampleModalLabel">Modal</h4>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

You also have other methods to interact with modal, for example:

您还可以使用其他方法与模态交互，例如：

$('#myModal').modal('toggle'); // Show if closed, close if shown
$('#myModal').modal('show'); // Show modal
$('#myModal').modal('hide'); // Hide modal

回答by sachin.ph

you can use any of the below.

您可以使用以下任何一种。

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

You can see more here: modal

你可以在这里看到更多：模态