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