Wednesday, 9 March 2016

MVC-Javascript Bootstrop Popup

Step1: index.cshtml
 <!--bootstrap-->
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>

 Step2: Write below code(click to open popup)
<h1>Gallery <a class="" href="#" data-toggle="modal" data-target="#GalleryPopup"><img src="~/images/add.png" title="Add New Gallery Image" class="imgadd" /> </a></h1>

step3:(popup Div)

<div class="modal fade" id="GalleryViewPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-dialogfbig" role="document">
        <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" id="myModalLabel">Testing</h4>
            </div>
            <div class="modal-body">
                <div class="Gallery">

                     <p> Hi this is Testing </p>
                </div>
                </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

No comments: