Moti Mashiah
asked on
Bootstrap
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.
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">×</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>
}
ASKER
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:
Please, let me know if you got my point this time.
Thanks,
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>
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');
}
Please, let me know if you got my point this time.
Thanks,
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
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
ASKER
Actually, there is no compatibility issues in my case.
I just need to know how to write the properties right.
For example:
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.
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
partly solved but gave me the idea thx.
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...