locked
How to create jquery dialog responsive using bootstrap css library RRS feed

  • Question

  • User264732274 posted

    i am using bootstrap css library in my asp.net webform project and many time i show jquery modal dialog. now tell me how can i make my modal responsive using bootstrap css library. please post a sample code to make jquery modal dialog responsive using bootstrap css. thanks

    Wednesday, November 30, 2016 8:02 AM

Answers

  • User-271186128 posted

    Hi sudip_inn,

    sudip_inn

    How to create jquery dialog responsive using bootstrap css library

    As for this issue, I suggest you could refer to the following code:

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <style type="text/css">
            .modal-content {
                display: none;
            }
    
            .modal-dialog {
                 !important;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $(".btnOpenModal").click(function () {
                    $(".modal-content").css("display", "block");
    
                    $(".modal-content").dialog({
                        resizable: true,
                        modal: true,
                        dialogClass: 'modal-dialog',
                        buttons: {
                            Ok: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                });
            });
        </script>
    
    
                                <button type="button" class="btn btn-info btn-lg btnOpenModal">Open Modal</button>
                                <!-- Modal -->
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <p>Some text in the modal.</p>
                                    </div>
                                </div>

    When we use JQuery Dialog, after rendering, if you are using F12 developer tools to check the html elements, you can see it will add some JQuery UI container (such as div and css style). So, if you want to make it responsive, you need to add bootstrap css style to the popup modal. Like above code.

    Besides, since the bootstrap css might be covered by the JQuery UI css style, you need to use the '!important' to enable Bootstrap style.

    In above code, I just change the position attribute, you could use F12 developer tools to check the CSS style and change other css attribute.

    Edit: From my point of view, I suggest you could directly use the BootStrap Modal popup.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 5, 2016 10:45 AM

All replies

  • User475983607 posted

    i am using bootstrap css library in my asp.net webform project and many time i show jquery modal dialog. now tell me how can i make my modal responsive using bootstrap css library. please post a sample code to make jquery modal dialog responsive using bootstrap css. thanks

    Why don't you simply use the bootstrap modal?  Or use the bootstrap framework as documented?

    Rather than asking an open ended questions, post the relevant bits of your code so we can reproduce the issue and provide assistance.  

    Wednesday, November 30, 2016 11:38 AM
  • User-1838255255 posted

    Hi sudip_inn,

    According to your description, i make a sample, when you change size of window, you can see the contents change, it can change width through window's width.Here is the sample code:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
    
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                                <p>Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    If you meet issue of responsive modal, please post the relevant code.

    Best Regards,

    Eric Du

    Wednesday, November 30, 2016 3:07 PM
  • User264732274 posted

    you use bootstrap modal which i do not run rather i am looking for a way to responsive my jquery dialog. please share idea. thanks

    Thursday, December 1, 2016 3:08 PM
  • User-271186128 posted

    Hi sudip_inn,

    sudip_inn

    How to create jquery dialog responsive using bootstrap css library

    As for this issue, I suggest you could refer to the following code:

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <style type="text/css">
            .modal-content {
                display: none;
            }
    
            .modal-dialog {
                 !important;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $(".btnOpenModal").click(function () {
                    $(".modal-content").css("display", "block");
    
                    $(".modal-content").dialog({
                        resizable: true,
                        modal: true,
                        dialogClass: 'modal-dialog',
                        buttons: {
                            Ok: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                });
            });
        </script>
    
    
                                <button type="button" class="btn btn-info btn-lg btnOpenModal">Open Modal</button>
                                <!-- Modal -->
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <p>Some text in the modal.</p>
                                    </div>
                                </div>

    When we use JQuery Dialog, after rendering, if you are using F12 developer tools to check the html elements, you can see it will add some JQuery UI container (such as div and css style). So, if you want to make it responsive, you need to add bootstrap css style to the popup modal. Like above code.

    Besides, since the bootstrap css might be covered by the JQuery UI css style, you need to use the '!important' to enable Bootstrap style.

    In above code, I just change the position attribute, you could use F12 developer tools to check the CSS style and change other css attribute.

    Edit: From my point of view, I suggest you could directly use the BootStrap Modal popup.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 5, 2016 10:45 AM