1. Home
  2. Development
  3. RE: How to remove close button from A.Modal

RE: How to remove close button from A.Modal

vas basfot, modified 10 Years ago.
How to remove close button from A.Modal
New Member Posts: 3 Join Date: 7/9/15 Recent Posts
Hi, a need remove close button on top right place from A.Modal. Thanks a lot. Below is my code from basic examples which I use.

<div class="yui3-skin-sam">
  <div id="modal"></div>
</div>

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: true,
        render: '#modal',
        width: 450
      }
    ).render();
  }
);
thumbnail
Jonathan Mak, modified 10 Years ago.
RE: How to remove close button from A.Modal (Answer)
Junior Member Posts: 44 Join Date: 2/3/11 Recent Posts
Hi Vas,

The AUI Modal has an attribute called "toolbars". You can pass in whatever contents you want to certain toolbar sections. If you are looking to remove the header close button, you can pass in a blank array to the header toolbar like below:


YUI().use(
	'aui-modal',
	function(Y) {
		var modal = new Y.Modal(
			{
				bodyContent: 'Modal body',
				centered: true,
				headerContent: '<h3>Modal header</h3>',
				modal: true,
				render: '#modal',
				toolbars: {
				    header: []
				}
				width: 450
			}
		).render();
	}
);


I hope this helps! Please let me know if you have any questions. Thanks!
vas basfot, modified 10 Years ago.
RE: How to remove close button from A.Modal
New Member Posts: 3 Join Date: 7/9/15 Recent Posts
Hi, super it works but ... still one small questions.

I need to no headerContent so I remove this line headerContent: '<h3>Loading</h3>', , but in window stay white empty row --> how remove all this row?

Thanks a lot.
Vasimkhan Pathan, modified 10 Years ago.
RE: How to remove close button from A.Modal (Answer)
New Member Posts: 2 Join Date: 5/27/15 Recent Posts
Hi,

To remove "toolbar" you have to set toolbar attribute to "false". The toolbar DIV will not be generated.

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: true,
        render: '#modal',
	toolbars: false,
        width: 450
      }
    ).render();
  }
);


If you want to remove header and toolbar both without any junk DIV. Try below code :

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        modal: true,
        render: '#modal',
		toolbars: false,
        width: 450
      }
    ).render();
  }
);


Thanks
vas basfot, modified 10 Years ago.
RE: How to remove close button from A.Modal
New Member Posts: 3 Join Date: 7/9/15 Recent Posts
Perfect. Second example it's exactly what I need. :-)

Thanks a lot.
Manushi Jani, modified 5 Years ago.
RE: How to remove close button from A.Modal
New Member Posts: 9 Join Date: 2/13/15 Recent Posts
Works perfect Jonathan...Thanks
Elbert Perez, modified 5 Years ago.
RE: How to remove close button from A.Modal
New Member Post: 1 Join Date: 8/1/20 Recent Posts
Very helpful and informative. Thank for sharing this post.
WalgreensListens