Modal popup in MVC

Question

How to show a bootstrap modal pop-up on click of a check-box?

I have a requirement in a view page to display a bootstrap modal pop-up where a list of records displayed in table from database. On click of single record, pop-up screen should be closed and the details of the selected record should be displayed in the parent view page.

Can anyone help on this with practical example?

Manikandan Murugesan · Answer

Refer the following Link : https://forums.asp.net/t/2104794.aspx?how+to+display+a+modal+window+in+an+event+bootstrap+checkbox+is+checked Or You can also do as below: script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > script > script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js" > script > link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet" /> script > $(document).ready(function () { $('input[ type = "checkbox" ]').on('change', function (e) { if (e.target.checked) { $('#myModal').modal(); } }); }) script > input type = "checkbox" id = "test6" /> label for = "test6" > Manual label > div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" 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" > × span > button > h4 class = "modal-title" id = "myModalLabel" > Modal title h4 > div > div class = "modal-body" > Checkbox is checked 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 > div >

Abhishek Srivastava · Answer

type = "checkbox" id = "id_remove_photograph" name = "remove_photograph" class = "checkbox_resize" onchange = " remove_photograph_change (); " photograph-remove-confirm = "Your Photograph will be removed only after you save the form!" > Remove Photograph // START: photograph remove modal code. $ ( '[photograph-remove-confirm]' ). click ( function ( ev ) { if (! $ ( '#photographRemoveConfirmModal' ). length ) { $ ( 'body' ). append ( ' {% trans "Confirm" %} - {% trans "Remove" %} {% trans "Photograph" %} {% trans "Cancel" %}    {% trans "Remove" %} {% trans "Photograph" %} ' ); } $ ( '#photographRemoveConfirmModal' ). find ( '.modal-body' ). text ( $ ( this ). attr ( 'photograph-remove-confirm' )); $ ( '#photographRemoveConfirmModal' ). modal ({ show : true }); return false ; }); // FINISH: photograph remove modal code.

Rajkiran Swain · Answer

https://stackoverflow.com/questions/37068715/how-to-show-a-bootstrap-modal-on-a-check-box-click-event