How to display a partial view as a popup/modal on button click using bootstrap or jquery?

Question

I realize that this could be repetitive question but I failed to find an answer so putting a new question. I am pretty new to web development and trying to hard to get this trivial scenario work: I want to display some information to the user when he clicks on a button. The information should be presented like a popup: it would close only when user clicks on close(X) on top right or ok button at bottom. I have tried implementing this using different ways I came across on various SO answers but nothing seems to work for me. Following code snippet that displays a static modal works:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade">
    <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

But I am not able to convert things to display my partial view. How do I display a similar modal which actually encompasses a partial view?

Answer 1

Your button reference a button to toggle showing/hiding of the modal, data-target="#myModal", but your modal didn't have an id.

It's not clear if you want the whole modal to be a partial, or just the inner content. It doesn't matter at all though, since this is all applied server-side, and your modal is processed client-side.

Actually, bootstrap already have support for dynamically loading "partials" (using jQuery load in code behind):

<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

The above is a much simpler way than my example below..

Read more about jQuery load() or get()

var myData = '<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">Modal title</h4>' +
  '</div>' +
  '<div class="modal-body">' +
  '<p>Load on request</p>' +
  '</div>' +
  '<div class="modal-footer">' +
  '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
  '<button type="button" class="btn btn-primary">Save changes</button>' +
  '</div>' +
  '</div>' +
  '</div>';

//myData could be a file, with the same contents, and then you would use the ".load()" method below instead
$('#myModal').on('show.bs.modal', function(e) {
  //$('#myModal').load('myFile.cshtml'); //When loading from a file/url
  $('#myModal').html(myData); //loading from a string
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal" id="myModal">

</div>