[Service Portal] - Widget with modal behavior embedded in another widget

[Vic Albergaria]

Hello, everyone.
I have two widgets, one that is just a button where when I click I activate a function that embeds another widget on the page that should behave like a modal.
The problem is that it only works when I click on it once, if I close the modal widget, it won't open anymore.
What is the easiest way to make an embedded widget behave like a modal?
I think I have to pass information between widgets and perhaps use $('#custom_modal_01').modal('show'); and $('#custom_modal_01').modal('hide');. But I'm not sure, does anyone have any ideas?

Widget one (Button) -HTML:

<button type="button" ng-click="c.openOrCloseModal()">open or close modal</button>
<sp-widget widget="c.myCustomModal"></sp-widget>

Widget one (Button) -Client:

api.controller=function(spUtil) {
	/* widget controller */
	var c = this;

	c.openOrCloseModal = function(){
		spUtil.get("custom_modal_01").then(function(response) {
			c.myCustomModal = response;
		});
	}
};

Widget two (Modal) -HTML:

<!-- /ONLY CONTAINS BOOTSTRAP MODAL -->
<div id="custom-modal"  class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Widget two (Modal) -Client:

api.controller=function() {
  /* widget controller */
  var c = this;
  $('#custom-modal').modal('show');
};

[ahefaz1]

@Vic Albergaria ,

Why not call the embedded modal directly when you click the button?

I am able to use methods on the $scope service to handle Modal events. You can also use the $uibModal service.

 <div class="row">
    <div class="col-sm-3" ng-repeat="item in c.items">
      <div class="thumbnail" data-toggle="modal" data-target="#imageModal" ng-click="openModal(item.certUrl, item.description)">
        <img ng-src="{{ item.imageUrl }}" alt="Thumbnail">
        <div class="caption">
          <h3>{{ item.description }}</h3>
        </div>
      </div>
    </div>
  </div>

 <div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <img ng-src="{{ modalImageUrl }}" alt="Full Image">
          <p class="mt-3">{{ modalDescription }}</p>
        </div>
      </div>
    </div>
  </div>

api.controller = function($scope, $rootScope, spUtil) {
    /* widget controller */
    var c = this;
    c.items = c.data.date_items;
    c.columns = Math.floor(12 / c.items.length);

    $scope.openModal = function(imageUrl, description) {
        $scope.modalImageUrl = imageUrl;
        $scope.modalDescription = description;
    };
};

Thanks,

[Vic Albergaria]

@ahefaz1, thank you very much for your reply!

In the case you gave as an example, there is only one widget. For my use case, it's necessary to have the 2 widgets separated in the way I mentioned. The first with the content and button and the second which is the modal, which is called after clicking on the button in the first widget.

[Vic Albergaria]

Thank you very much for your reply, @ahefaz1.

In the case you gave as an example, there is only one widget. For my use case, it's necessary to have the 2 widgets separated in the way I mentioned. The first with the content and button and the second which is the modal, which is called after clicking on the button in the first widget.