locked
How to enable draggable popup RRS feed

  • Question

  • User-1790113996 posted

    Good day to all mvc master,

    kindly ask how can I enable the draggable popup, kindly check my code below.

    Create View

    @model WarehouseRtoRSystem.Models.BudgetViewModel
    
    <style>
        span.login-text {
            font-size: 22px;
            display: table;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <div class="modal" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    @*<button type="button" class="close" data-dismiss="modal">&times;</button>*@
                    <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true" title="Close">&times;</span> <span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Budget</h4>
                </div>
                <div class="modal-body">
                    <b> Please Select Date of your department budget: </b><div id="datepicker"></div>
                    <br />
                    <div id="abc">
                        <div id="popupContact" title="Basic dialog">
                            <form action="/Budget/Create" id="form" method="post" name="form">
                                @Html.AntiForgeryToken()
    
                                <div class="form-horizontal">
                                 
                                    <hr />
                                    @Html.ValidationSummary(true)
                                    <div class="form-group">
                                        <label>
                                        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                        LIST OF YOUR DEPARTMENT</label>
                                        <div class="col-md-10">
                                            <span class="login-text">@Html.DropDownList("DEPARTMENTID", (SelectList)ViewBag.DeptList, new { @id = "RemarksId", @class = "form-control" })</span>
                                         </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.YEAR, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBoxFor(model => model.YEAR, new { @class = "form-control", @readonly = "readonly" })
                                            @Html.ValidationMessageFor(model => model.YEAR)
                                        </div>
                                    </div>
    
    
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.MONTH, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBoxFor(model => model.MONTH, new { @class = "form-control", @readonly = "readonly" })
                                            @Html.ValidationMessageFor(model => model.MONTH)
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.Label("WORKWEEK", new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("WORKWEEK", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.BUDGET, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("ShowBudget", null, new { @class = "form-control" })
                                            @Html.HiddenFor(model => model.BUDGET, new { @class = "form-control" })
                                            @Html.ValidationMessageFor(model => model.BUDGET)
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @*@Html.Label("STARTDATE", new { @class = "control-label col-md-2" })*@
                                        <div class="col-md-10">
                                            @Html.Hidden("STARTDATE", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        @*@Html.Label("ENDDATE", new { @class = "control-label col-md-2" })*@
                                        <div class="col-md-10">
                                            @Html.Hidden("ENDDATE", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
    
                              
                                    
    
                                    <div class="form-group">
                                        <div class="col-md-offset-2 col-md-10">
                                            <input type="submit" value="Submit" class="btn btn-primary"  id="submit" />
                                        </div>
                                    </div>
                                    <br />
                                    <br />
                                    
                                </div>
    
                            </form>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    
    
        $(document).ready(function () {
    
            $("#ShowBudget").change(function () {
                var value = parseFloat($(this).val());
                $("#BUDGET").val(value); //assign the current value to BUDGET field
    
                if (!isNaN(value)) {
                    var result = value.toLocaleString(
                        "en-US", // use a string like 'en-US' to override browser locale
                        { minimumFractionDigits: 2 }
                     );
                    $(this).val(result);
    
    
    
                }
            })
        })
    
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    
        function getWeekNumber(d) {
            d = new Date(+d);
            d.setHours(0, 0, 0, 0);
            d.setDate(d.getDate() + 4 - (d.getDay() || 7));
            var yearStart = new Date(d.getFullYear(), 0, 1);
            var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
            return weekNo;
        }
    
        var $j = jQuery.noConflict();
        $(function () {
            $j('#datepicker').datepicker({
                onSelect: function (dateText, inst) {
                    var Year = dateText.substring(6, 10);
                    var Month = dateText.substring(0, 2)
                    $("#YEAR").val(Year);
                    $("#MONTH").val(Month);
                    var newdate = new Date(dateText);
                    var result = getWeekNumber(newdate);
                    $("#WORKWEEK").val(result);
                    var first = newdate.getDate() - newdate.getDay();
                    var last = first + 6;
                    var firstday = new Date(newdate.setDate(first)).Format("yyyy-MM-dd");
                    var lastday = new Date(newdate.setDate(last)).Format("yyyy-MM-dd");
                    debugger;
                    $("#STARTDATE").val(firstday);
                    $("#ENDDATE").val(lastday);
                    div_show();
                    debugger;
                }
            });
        });
        function div_show() {
    
            document.getElementById('abc').style.display = "block";
        }
        //Function to Hide Popup
        function div_hide() {
            document.getElementById('abc').style.display = "none";
        }
    </script>
    @section Scripts {
    
    
        <script type="text/javascript">
    
    
            $(document).ready(function () {
                $("#RemarksId").change(function () {
                    $("#Remarks").val($(this).val());
                })
            })
        </script>
    
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    
    

    thank you.

    Tuesday, January 23, 2018 6:40 AM

Answers

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 23, 2018 9:13 AM
  • User1400794712 posted

    Hi Cloudfiers,

    You can add '$("#myModal").draggable({ handle: ".modal-header" });' after showing this modal popup to make the popup draggable.

    In your code, Create view is a partial view, which will be loaded in Index View. You are loading JQuery files both in partial view and main view, it may cause conflict. We need to use jQuery.noConflict().

    I'm using bootstrap 3.3.5 css.

    bundles.Add(new StyleBundle("~/Content/css").Include(
                //"~/Content/bootstrap.css",
                "~/Content/site.css"));

    In the Main view:

    <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-sm">Update Budget</a>
    <div id="showModal"></div>
    @section scripts{
        <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script>
            var $j = jQuery.noConflict();
            $j("a").click(function () {
                $j("#showModal").html("");
                $j.ajax({
                    url: '/Budget/Create',
                    data: { month: 1, WORKWEEK: 1/*,other...*/ },
                    success: function (data) {
                        $j("#showModal").html(data);
                        $j("#myModal").show();
                        $j("#myModal").draggable({ handle: ".modal-header" }); //Here add.
                    }
                })
            })
            $j("body").on("click", ".close", function () {
                $j("#showModal").html("");
            })
        </script>
    }

    How it works:

    Best Regards,

    Daisy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 24, 2018 2:41 AM

All replies

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 23, 2018 9:13 AM
  • User1400794712 posted

    Hi Cloudfiers,

    You can add '$("#myModal").draggable({ handle: ".modal-header" });' after showing this modal popup to make the popup draggable.

    In your code, Create view is a partial view, which will be loaded in Index View. You are loading JQuery files both in partial view and main view, it may cause conflict. We need to use jQuery.noConflict().

    I'm using bootstrap 3.3.5 css.

    bundles.Add(new StyleBundle("~/Content/css").Include(
                //"~/Content/bootstrap.css",
                "~/Content/site.css"));

    In the Main view:

    <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-sm">Update Budget</a>
    <div id="showModal"></div>
    @section scripts{
        <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script>
            var $j = jQuery.noConflict();
            $j("a").click(function () {
                $j("#showModal").html("");
                $j.ajax({
                    url: '/Budget/Create',
                    data: { month: 1, WORKWEEK: 1/*,other...*/ },
                    success: function (data) {
                        $j("#showModal").html(data);
                        $j("#myModal").show();
                        $j("#myModal").draggable({ handle: ".modal-header" }); //Here add.
                    }
                })
            })
            $j("body").on("click", ".close", function () {
                $j("#showModal").html("");
            })
        </script>
    }

    How it works:

    Best Regards,

    Daisy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 24, 2018 2:41 AM