CODEWITHSUNDEEP
javascriptjquery
Iyda
Iyda

Reputation: 25

how to popup a modal dialog box that use window.open in jquery after click button

I am new in learning jQuery and Javascript. I want a window modal dialog pop up when click a button.Also I must use window.open in the function as it is easier for me.Before this I use showModalDialog but since it is deprecated and cannot run on Chrome, I tried to use jQuery UI. This is what I managed so far:

   $('#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" />

It popup a window dialog when I click the button but it is not modal. Thank you.

Upvotes: 2

Views: 2242

Answers (1)

Bhavin Solanki
Bhavin Solanki

Reputation: 4828

You can use bootstrap modal :

<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>

Upvotes: 1

Related Questions