Question

我是学习jQuery和Javascript的新手。我希望在单击按钮时弹出一个窗口模式对话框。我也必须在函数中使用window.open，因为它对我来说比较容易。在此之前我使用showModalDialog但由于它已被弃用且无法在Chrome上运行，我尝试使用jQuery UI。这是我到目前为止所做的：

   $('#openDialog4').click(function (event) {           

    event.preventDefault();

    var url = "http://www.typescriptlang.org/";
    var windowName = "popUp";
    var windowSize = "width=200,height=200";

    result = window.open(url, windowName, windowSize);    
});

<input type="button" id="openDialog4" value="Open Dialog window" />

单击按钮时会弹出一个窗口对话框，但它不是模态的。谢谢。

Answer 1

您可以使用bootstrap模式：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
</script>

如何在单击按钮后弹出一个在jquery中使用window.open的模式对话框

1 个答案: