How to remove close button from A.Modal

RE: How to remove close button from A.Modal

2020-08-01T08:06:48Z

Very helpful and informative. Thank for sharing this post.
WalgreensListens

RE: How to remove close button from A.Modal

2020-05-07T14:58:38Z

Works perfect Jonathan...Thanks

RE: How to remove close button from A.Modal

2015-07-13T10:20:27Z

Perfect. Second example it's exactly what I need. :-)

Thanks a lot.

RE: How to remove close button from A.Modal

2015-07-13T09:11:51Z

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

RE: How to remove close button from A.Modal

2015-07-13T07:23:04Z

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.

RE: How to remove close button from A.Modal

2015-07-09T16:36:27Z

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!

How to remove close button from A.Modal

2015-07-09T16:18:11Z

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();
  }
);