Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Bootstrap

Posted on 2016-07-30
6
Medium Priority
?
120 Views
Last Modified: 2016-08-04
Hi Guys,

I created bootstrap modal popup box in my MVC application and I can't do couple of things with it
1. I can't add minimize button.
2. I can't drag the popup window.

Actually, I'm looking for to how I can add property to this modal box. I found this on the internet but still didn't get it and also it doesn't have all the properties I need - https://nakupanda.github.io/bootstrap3-dialog/.
I was trying to do some javascript as well but no success.

Here is my code:
Please, let me know if you have any idea to how can I get properties for modal box.
<div class="form-group">
    <div class="text-center">
        <h2>Bootstrap Modal</h2>

    </div>
</div>

<div class="form-group">
    <div class="col-md-12">
        <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.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<br />

<button class="btn btn-default" data-toggle="modal" data-target="#myModal">Open Modal</button>


@section scripts{
    <script>
       
      

    </script>
}

Open in new window

0
Comment
Question by:Moti Mashiah
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41737035
let me know if you have any idea to how can I get properties for modal box.
What do you mean saying 'properties'?
About minimize button it doesn't make sense to me: desktop applications dialogs don't have a minimize button and I don't understand why you should put a minimize button in a dialog. A dialog is a quick message to the user, a quick question, sometime a simple form: all things which don't have to be minimized because they prevent the app to work until the user press OK or Cancel buttons...
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41737367
Actually, I'm using dialog for more than just popup messages as I'm using asp.net mvc project and my dialogs are using for search boxes and yes there is minimize option for dialog boxes.

Sorry, I think I wasn't clear enough when I post the question.

Now before I explain what I really need please visit this link - https://github.com/ROMB/jquery-dialogextend and see example:

This link above gives the option to do it but for some reason I can't get it to how to make it work in my MVC project.

Here is what I'm doing:
using framework - jquery-ui.js, jquery.dialogextend.js, jquery-ui.css

Html side:
<div id="popdialog">

</div>

Open in new window

javascript:
 $("#popdialog").dialog({
                title: "Dialog",
                autoOpen: false,
                width: 400,
                height: 400,
                resizable: true,
                draggable: true,
                minimize: "ui-icon-extlink",
            });

//here I click on button to initiate the dialog
[code]
 function Opendialog() {
            $("#popdialog").dialog('open');
        }

Open in new window



Please, let me know if you got my point this time.

Thanks,
0
 
LVL 26

Expert Comment

by:lenamtl
ID: 41737422
Hi,

You are using an old code that is compatible with
jQuery 1.11.1
jQueryUI 1.11.0

So if you use more recent version of jQuery & jQueryUI, good chance the problem is coming from compatibility. If it's the case you can try to use https://github.com/jquery/jquery-migrate

What was missing from the Bootstrap modal so I can suggest you a better script.
http://getbootstrap.com/javascript/#modals
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Moti Mashiah
ID: 41737448
Actually, there is no compatibility issues in my case.

I just need to know how to write the properties right.

For example:
$("#popdialog").dialog({
                title: "Dialog",
                autoOpen: false,
                width: 400,
                height: 400,
                resizable: true,
                draggable: true,
                minimizeable: [true,{ my: "ui-icon ui-icon-minus" }],\\ How can I write this line to work.
            });

Open in new window

0
 
LVL 26

Accepted Solution

by:
lenamtl earned 2000 total points
ID: 41738780
Hi,

The close function seems missing from your script

"close" : function(){
        if(last[0] != this){
          $(this).remove(); 
        }

Open in new window


Also check the dialog-extend options
This is a working example
$(function(){
  var last;

  // preview icon
  $("#config-icon select")
    .change(function(){
      var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
      $(this).parents(".wrapper").find("ins").html(icon);
    })
    .trigger("change");


  // click to open dialog
  $("#new-dialog").click(function(){
    //dialog options
    var dialogOptions = {
      "title" : "dialog@" + new Date().getTime(),
      "width" : 400,
      "height" : 300,
      "modal" : $("#is-modal").is(":checked"),
      "resizable" : $("#is-resizable").is(":checked"),
      "draggable" : $("#is-draggable").is(":checked"),
      "close" : function(){
        if(last[0] != this){
          $(this).remove(); 
        }
      }
    };
    if ( $("#button-cancel").is(":checked") ) {
      dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
    }
    // dialog-extend options
    var dialogExtendOptions = {
      "closable" : $("#button-close").is(":checked"),
      "maximizable" : $("#button-maximize").is(":checked"),
      "minimizable" : $("#button-minimize").is(":checked"),
      "minimizeLocation" : $("#my-form [name=minimizeLocation]:checked").val() || false,
      "collapsable" : $("#button-collapse").is(":checked"),
      "dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
      "titlebar" : $("#my-form [name=titlebar]:checked").val() || false
    };
    $("#my-form [name=icon]").each(function(){
      if ( $(this).find("option:selected").html() != "(default)" ) {
        dialogExtendOptions.icons = dialogExtendOptions.icons || {};
        dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
      }
    });
    $("#my-form [name=event]").each(function(){
      if ( $(this).is(":checked") ) {
        dialogExtendOptions[$(this).attr("rel")] = function(evt, a,b,c) {
          $(evt.target).prepend(evt.type+"@"+evt.timeStamp+"<br />");
        };
      }
    });
    // open dialog
    last = $("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);
  });
  
  //click to reopen dialog
  $('#reopen-dialog').click(function(){
    last.dialog('open');
  });
  // click to invoke method
  $("#config-method button").click(function(){
    var command = $(this).text();
    var dialog = $(".ui-dialog:last").find(".ui-dialog-content");
    if ( $(dialog).length ) {
      if ( command == 'state' ) {
        alert( $(dialog).dialogExtend(command) );
      } else {
        $(dialog).dialogExtend(command);
      }
    }
  });

});
</script>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 41743277
partly solved but gave me the idea thx.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question